Need help adding headers and footers on each page when I print a long html table

Question

I have a view with a long HTML table. When I try to print the view, the table is split into pages. Obviously the form breaks and continues to the next page and so on. I want to be able to add headers and footers neatly on every printed page.

I have tried using css page break properties, for example:

Internal page breaks After paging Before pagination<​​/p>

I tried fixing the header and footer to the top and bottom using position:fixed. Even though the footer appears on every page, it overlaps the table. As you can see in the highlighted area:

So I want to show header and footer without any overlap.

This is how the table broke^^

I want header and footer to be displayed on every page. I tried adding header and footer in thead and tfoot tags but that doesn't work.

I have tried using css page break properties, for example:

Internal page breaks After paging Before pagination<​​/p>

I tried fixing the header and footer to the top and bottom using position:fixed. Even though the footer appears on every page, it overlaps the table. As you can see in the highlighted area:

Answer 1

This is the code that solved my problem:

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;
}