I have a requirement where I have a header html, Content HTML , and Footer HTML. in css I have put border as 1px solid black for the body. It prints fine for all pages except last page where the content html ends in middle of the page and the borders are not connected to the footer. Please have a look at screenshot attached. The yellow highlighted border is what I am looking for. Please note that the number of rows in content body are dynamic and can change
I had to remove some rows from the html because of character limitation. wkhtmltopdf version : 12.6 OS : Windows 10
<!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
position: relative;
padding: 5px;
border: 1px solid black;
height: 350px;
}
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:12px;">
<tr>
<td colspan="3" align="center" border="0px" style="vertical-align:top;border-style: hidden;"><b>DOC TYPE</b></td>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
<tr>
<td align="left" width="18%" border="0" style="padding:5px;border-left-style: hidden;border-right-style: hidden;"><img width="100%" src="data:image/jpeg;base64,"></img></td>
<td width="50%" height="40" align="center" valign="top" style="border-left-style: hidden;border-right-style: hidden;">
<div>Header Goes Here</div>
<div>Header Goes Here</div>
<div>Header Goes Here</div>Header Goes Here<br></br><div width="50%" align="left" style="font-size:11px;padding-left: 6px;vertical-align:bottom;border-right-width:0px"><b>IRN :
</b></div>
</td>
<td align="right" width="32%" style="border-left-style: hidden;border-right-style: hidden;"/>
</tr>
</table>
</body>
</html><!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
border: 1px solid black;
}
tr { page-break-inside: avoid; }
td { page-break-inside: avoid; }
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
.page_break{
page-break-after: always;
}
</style></head>
<body>
<table border="1" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:11px;">
<tr height="20">
<td width="2%" rowspan="2" align="center"><span style="display:block;">S.</span><span style="display:block;">No.</span></td>
<td width="20%" rowspan="2" align="center">Description of Goods</td>
<td width="7%" rowspan="2" align="center">HSN Code
<div>(GST)</div>
</td>
<td width="6%" rowspan="2" align="center">Currency</td>
<td width="5%" rowspan="2" align="center">QTY</td>
<td width="5%" rowspan="2" align="center">UOM</td>
<td width="5%" rowspan="2" align="center">Rate<br>(INR)</br></td>
<td width="10%" rowspan="2" align="center">Taxable Value (INR)</td>
<td width="10%" colspan="2" align="center">CGST</td>
<td width="10%" colspan="2" align="center">SGST</td>
<td width="10%" colspan="2" align="center">IGST</td>
<td width="10%" rowspan="2" align="center">Total</td>
</tr>
<tr height="20">
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
<td width="5%" align="center">Rate</td>
<td width="5%" align="center">Amount</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">1</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">2</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">3</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">4</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">5</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">6</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">7</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">8</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">9</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">10</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">11</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
<tr height="25px">
<td width="2%" align="center" style="font-size:8px;">12</td>
<td width="20%" align="center">Rice</td>
<td width="7%" align="center">30049099</td>
<td width="6%" align="center"></td>
<td width="5%" align="right">100.34</td>
<td width="5%" valign="center" align="center">BAG</td>
<td width="5%" align="right">99.54</td>
<td width="10%" align="right">9978.84</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right">0.0</td>
<td width="5%" align="right" style="font-size:9px;">0.0</td>
<td width="5%" align="right"></td>
<td width="5%" align="right" style="font-size:9px;">1196.0</td>
<td width="10%" align="right">12896.24</td>
</tr>
</table>
</body>
</html><!DOCTYPE HTML>
<html >
<head><style type="text/css">
body {
font-family:Times New Roman;
border: 0px solid black;
height: 100px;
}
#watermark {
color: #d0d0d0;
font-size: 130px;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
position: absolute;
width: 50%;
height: 50%;
margin: 0;
z-index: -1;
left: 190px;
top: 400px;
}
tr { page-break-inside: avoid; }
td { page-break-inside: avoid; }
.tableArray1 {
border: 1px solid black;
border-collapse: collapse;
}
.page_break{
page-break-after: always;
}
</style></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableArray1" style="font-size:12px;">
<tr>
<td width="60%" valign="top" style="padding-left:5px;font-size:12px;">
Beneficiary Bank Details
<div></div>
</td>
<td align="center" width="40%"><b>Footer Footer.</b><br></br><br></br><b>Authorised Signatory</b></td>
</tr>
</table>
</body>
</html>