in my application I have a requirement to enable printing reports. I am using printJs plugin to print these reports. In order to repeat the header and footer in every printed page I am using thead and tfoot elements. But the problem is that the rest of the content which is contained in the tbody overlaps with the header and footer.
Please refer to the images below. The overlap in the images have been indicated with yellow markings.
The style I am using in printJs is:
style:"@page{size: A4;}.header-space{position:fixed !important;top:0 !important;}.footer-space{position:fixed !important;bottom:0 !important;}"
The header html is:
<thead>
<tr>
<td><div class="header-space">I am the header!</div></td>
</tr>
</thead>
And the footer html is:
<tfoot>
<tr>
<td class="text-center"><div class="footer-space">I am the footer!</div></td>
</tr>
</tfoot>
How am I to resolve this issue?
