Skip to content

Instantly share code, notes, and snippets.

@fatelgit

fatelgit/weasyprint-table-html

Created July 6, 2022 08:23
Show Gist options
  • Save fatelgit/0bb129ac6e7a4eb572a90b92a8c16dc5 to your computer and use it in GitHub Desktop.
Save fatelgit/0bb129ac6e7a4eb572a90b92a8c16dc5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
weasyprint-table-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
header {
position: running(header);
border: 1px solid green;
}
footer {
position: running(footer);
font-size: 8pt;
font-weight: 100;
}
footer .sb {
text-align: center;
}
footer .sb img {
width: 140px;
}
header img {
width: 180px;
margin: 3cm 0 2cm 0;
}
@page{
margin: 4cm 2cm 3cm 2cm;
@top-right{
content: element(header);
}
@bottom-center{
content: element(footer);
width: 100%;
}
size: A4;
}
body {
font-family: sans-serif;
font-size: 11pt;
margin: 0;
}
.address_line {
font-size: 8pt;
}
.client_data .fixed_width {
display: inline-block;
width: 110px;
}
.wrapper .col25 {
float: left;
}
.wrapper .col50 {
width: 50%;
float: left;
}
.wrapper .col75 {
width: 75%;
float: left;
}
.wrapper .col100 {
width: 100%;
float: left;
}
.pull-right {
float: right
}
.text-right {
text-align: right;
}
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
page-break-inside: avoid !important;
}
thead {
font-weight: 700;
border-bottom: 1px solid black;
text-align: left;
}
/*th, td {*/
/* padding: 5px 5px 5px 0;*/
/*}*/
tr td {
padding: 5px 0;
vertical-align: middle;
}
tr.border-bottom {
border-bottom: 1pt solid black;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 8pt;
border: 1px solid red;
box-decoration-break: clone
}
.table-striped tr:nth-child(even) {
background-color: #f2f2f2;
}
.font-normal {
font-weight: 400;
}
.font-size-normal {
font-size: 11pt;
}
.new-page {
page-break-before: always;
}
</style>
</head>
<body>
<header>
<img src="https://dummyimage.com/300x100/000/fff"/>
</header>
<footer>
<div class="wrapper">
<div class="col75">
<div><span class="font-normal">dummy GmbH</span> · Dummystreet 1 · 11111 Town</div>
<div><span class="font-normal">CEO:</span> foo ·<span
class="font-normal">Contact:</span> [email protected] · www.example.com
</div>
</div>
<div class="col25 sb">dummy GmbH is a member of<br/><img
src="https://dummyimage.com/300x50/000/fff"/></div>
</div>
</footer>
<div class="container">
<div class="address_line">dummy GmbH · Dummystreet 1 · 11111 Town · Germany<br/><br/></div>
<div class="wrapper">
<div class="col50">
<div class="client_address">customer GmbH<br/>Sir John Dow<br/>Dummystreet 116<br/>11111 Town
</div>
</div>
<div class="col50">
<div class="client_data pull-right">Town, 06.07.22<br/><span
class="fixed_width">Customer-No.:</span>11111<br/><span class="fixed_width">Invoice-No.:</span>11111-22-005
</div>
</div>
</div>
<div class="wrapper"><br/><br/><br/><b>Report for May 2022</b><br/><br/>Dear Sir or Madam,<br/><br/>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br/><br/><br/></div>
<div class="wrapper">
<table class="col100 table-striped">
<thead>
<tr>
<th>No</th>
<th>City</th>
<th>Place</th>
<th>Begin</th>
<th>End</th>
<th>Duration</th>
<th>Netto</th>
<th>Vat (19%)</th>
<th>Brutto</th>
</tr>
</thead>
<tbody>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
<tr>
<td>5249372</td>
<td>Dummytown</td>
<td>Place</td>
<td>06.07.2022 08:07</td>
<td>06.07.2022 10:07</td>
<td>02:00</td>
<td>255,97 €</td>
<td>48,63 €</td>
<td>304,60 €</td>
</tr>
</tbody>
</table>
foo
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment