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:
This is the code that solved my problem:
HTML
<table> <thead><tr><td> <div class="header-space"> </div> </td></tr></thead> <tbody><tr><td> <div class="content">...</div> </td></tr></tbody> <tfoot><tr><td> <div class="footer-space"> </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; }