Need help adding a header and footer to on every page when I print a long html table

Question

I have a view with a long HTML table. When I try to print that view, the table gets divided into several pages. Obviously, the table breaks and continues to next page and so on. I want to be able to add a header and a footer on EACH of these print pages neatly.

I have tried using css page break properties like:

page-break-inside page-break-after page-break-before

I have tried fixing the header and footer to top and bottom using position: fixed. Even if the footer shows on every page it overlaps the table.as you can see in highlighted area:

So I want to display the header and footer without any overlapping.

This is how the table breaks^^

I want a header and footer to show on every page. I tried adding my header and footer in the thead and tfoot tag but that didnt work.

I have tried using css page break properties like:

page-break-inside page-break-after page-break-before

I have tried fixing the header and footer to top and bottom using position: fixed. Even if the footer shows on every page it overlaps the table.as you can see in highlighted area:

Answer 1

Here is the code that solved my issue:

HTML

<table>
  <thead><tr><td>
    <div class="header-space">&nbsp;</div>
  </td></tr></thead>
  <tbody><tr><td>
    <div class="content">...</div>
  </td></tr></tbody>
  <tfoot><tr><td>
    <div class="footer-space">&nbsp;</div>
  </td></tr></tfoot>
</table>
<div class="header">...</div>
<div class="footer">...</div>

CSS

.header, .header-space,
.footer, .footer-space {
  height: 100px;
}
.header {
  position: fixed;
  top: 0;
}
.footer {
  position: fixed;
  bottom: 0;
}