I would like to repeat this 2 section here on every printed page on Safari. I try many ways but on Safari it just won’t repeat the header on every printed pages. Safari just skip the header and continue on print. Some solution works on Chrome but not on Safari.
Any idea how to repeat these 2 header sections on every printed page ?
Here the html code for the
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
/* THE FOLLOWING CSS IS REQUIRED AND SHOULD NOT BE MODIFIED. */
div.fauxRow {
display: inline-block;
vertical-align: top;
width: 100%;
page-break-inside: avoid;
}
table.fauxRow {border-spacing: 0;}
table.fauxRow > tbody > tr > td {
padding: 0;
overflow: hidden;
}
table.fauxRow > tbody > tr > td > table.print {
display: inline-table;
vertical-align: top;
}
table.fauxRow > tbody > tr > td > table.print > caption {caption-side: top;}
.noBreak {
float: right;
width: 100%;
visibility: hidden;
}
.noBreak:before, .noBreak:after {
display: block;
content: "";
}
.noBreak:after {margin-top: -594mm;}
.noBreak > div {
display: inline-block;
vertical-align: top;
width:100%;
page-break-inside: avoid;
}
table.print > tbody > tr {page-break-inside: avoid;}
table.print > tbody > .metricsRow > td {border-top: none !important;}
/* THE FOLLOWING CSS IS REQUIRED, but the values may be adjusted. */
/* NOTE: All size values that can affect an element's height should use the px unit! */
table.fauxRow, table.print {
font-size: 16px;
line-height: 20px;
}
/* THE FOLLOWING CSS IS OPTIONAL. */
body {counter-reset: t1;} /* Delete to remove row numbers. */
.noBreak .t1 > tbody > tr > :first-child:before {counter-increment: none;} /* Delete to remove row numbers. */
.t1 > tbody > tr > :first-child:before { /* Delete to remove row numbers. */
display: block;
text-align: right;
counter-increment: t1 1;
content: counter(t1);
}
table.fauxRow, table.print {
font-family: Tahoma, Verdana, Georgia; /* Try to use fonts that don't get bigger when printed. */
margin: 0 auto 0 auto; /* Delete if you don't want table to be centered. */
}
table.print {border-spacing: 0;}
table.print > * > tr > * {
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 0 5px 0 5px;
}
table.print > * > :first-child > * {border-top: 2px solid black;}
table.print > thead ~ * > :first-child > *, table.print > tbody ~ * > :first-child > * {border-top: none;}
table.print > * > tr > :first-child {border-left: 2px solid black;}
table.print > thead {vertical-align: bottom;}
table.print > thead > .borderRow > th {border-bottom: none;}
table.print > tbody {vertical-align: top;}
table.print > caption {font-weight: bold;}
@media print
{
thead {display: table-header-group;}
}
#imageContainter {
width: 80px;
height: 80px;
text-align: center;
}
.objectImg{
max-width: 100%;
max-height: 100%;
/*object-fit: contain;
object-fit: scale-down;
object-position: -10% 0;
object-fit: none;
object-fit: fill;*/
}
.invoice-box{
max-width:800px;
margin:auto;
padding:30px;
/border:1px solid #eee;/
/*box-shadow:0 0 10px rgba(0, 0, 0, .15); */
font-size:15px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table td{
padding:2.5px;
vertical-align:top;
}
.invoice-box table tr td:nth-child(2){
text-align:right;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.top table th.orderTitle{
text-align:right;
padding-top:0px;
padding-bottom:0px;
}
.invoice-box table tr.top table td.orderInfo{
text-align:left;
padding-top:0px;
padding-bottom:0px;
min-width: 20px;
max-width: 150px;
word-wrap: break-word;
}
.invoice-box table tr.top table th.addressTitle{
font-size:14px;
text-align:left;
padding-top:0px;
padding-bottom:0px;
min-width: 20px;
max-width: 150px;
word-wrap: break-word;
}
.invoice-box table tr.top table td.addressInfo{
text-align:left;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
min-width: 20px;
max-width: 150px;
word-wrap: break-word;
}
.invoice-box table tr.information table th.addressTitle{
text-align:left;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
min-width: 20px;
max-width: 150px;
word-wrap: break-word;
}
.invoice-box table tr.information table td.addressInfo{
text-align:left;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
min-width: 20px;
max-width: 150px;
word-wrap: break-word;
}
.invoice-box table tr.heading td{
background:#eee;
border-bottom:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td:nth-child(2){
border-top:2px solid #eee;
font-weight:bold;
}
thead.report-header {
display:table-header-group;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
</style>
</head>
<body>
<thead>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0" border="0" >
<tbody>
<td colspan="9">
<table >
<tbody>
<tr>
<th style="text-align:center;font-size:16px;">Testing</th>
</tr>
</tbody>
</table>
</td>
<tr class="top">
<td colspan="4">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" border="0" >
<tbody>
<tr>
<th class="addressTitle">Testing Company</td>
</tr>
<tr>
<td class="addressInfo">Testing Company <br>Testing Company <br>Testing Company <br>Testing Company </td>
</tr>
</tbody>
</table>
</td>
</thead>
<td colspan="6">
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;" border="0">
<tbody>
<tr>
<th class="orderTitle">Testing: </th>
<td class="orderInfo"> NULL </td>
</tr>
<tr>
<th class="orderTitle">Testing : </th>
<td class="orderInfo"> Testing Company </td>
</tr>
<tr>
<th class="orderTitle">Testing : </th>
<td class="orderInfo"> Testing Company </td>
</tr>
<tr>
<th class="orderTitle">Testing : </th>
<td class="orderInfo">Testing Company </td>
</tr>
<tr>
<th class="orderTitle">Testing : </th>
<td class="orderInfo">Testing Company </td>
</tr>
<tr>
<th class="orderTitle">Testing: </th>
<td class="orderInfo">Testing Company </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr >
<td colspan="9">
<hr/>
</td>
</tr>
<tr class="information">
<td colspan="4" >
<table>
<tbody>
<tr>
<th style="text-align: left;background:#eee;"> BILL TO </th>
</tr>
<tr>
<th class="addressTitle" style="text-align:left;"> Testing Company </th>
</tr>
<tr>
<td class="addressInfo" style="text-align: left; padding:0px;"> Testing Company <br>Testing Company <br>Testing Company <br>Testing Company </td>
</tr>
</tbody>
</table>
</td>
<td colspan="6">
<table>
<tbody>
<tr>
<th style="text-align: left;background:#eee;"> SHIP TO </th>
</tr>
<tr>
<th class="addressTitle" style="text-align:left;"> Testing Company </th>
</tr>
<tr>
<td class="addressInfo" style="text-align: left;padding:0px;"> Testing Company ,<br>Testing Company <br>Testing Company<br>Testing Company </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="heading">
<td style="text-align:left;width:3%;"> Testing </td>
<td style="text-align:left;width:20%;"> Testing </td>
<td style="text-align:left;width:15%;"> Testing </td>
<td style="text-align:left;width:40%;"> Testing </td>
<td style="text-align:center;width:12%;"> Testing </td>
<td style="text-align:center;width:15%;"> Testing </td>
<td style="text-align:center;width:10%;"> Testing </td>
<td style="text-align:center;width:10%;"> Testing </td>
<td style="text-align:center;width:10%;"> Testing </td>
</tr>
<tr class="heading">
<td colspan="1"></td>
<td style="text-align:left;width:20%;"> Testing </td>
<td colspan="1"></td>
<td style="text-align:left;width:40%;"> Testing </td>
<td colspan="5" >
</td>
</tr>
<tr >
<td colspan="9" >
<tr class="item last">
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
<tr>
<td style="text-align: center;">1.</td>
<td style="text-align: left;">Testing</td>
<td>
<div id="imageContainter"> <img class="objectImg" src=''></div>
</td>
<td style="text-align: left;">Testing </td>
<td style="text-align: center;">3 </td>
<td style="text-align: center;">1050.00</td>
<td style="text-align: center;"></td>
<td style="text-align: center;word-wrap:break-word;">30%</td>
<td style="text-align: right;">2205.00</td>
<tr>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>