I am having nightmares figuring out how to properly set CSS and HTML layout for printing documents in our web-app. We have different documents that come into the system (order, invoice, delivery notes, ...). The documents consist of:
- static header (company logo, contact info)
- body
- customer data (shipping, billing address)
- items table (table with several rows, which can spread trough several pages)
- static footer (disclaimer)
What I want is following print functionality:
- I want static header and footer to be printer on each page if the body spreads trough several pages
- The items table to have a table header printed in every page if it spreads in more pages
Currently my HTML layout is like this:
<!-- STATIC HEADER -->
<div id="pageHeader">
<table class="table">
<tr>
<td>Static header content here</td>
</tr>
</table>
</div>
<!-- DOCUMENT CONTENT -->
<div id="pageBody">
<!-- Customer data -->
<table class="table">
<tr>
<td>Customer data here</td>
</tr>
</table>
<!-- Items table -->
<table class="table table-condensed table-print">
<thead style="display:table-header-group;">
<tr>
<th>Table header here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows here</td>
</tr>
</tbody>
</table>
</div>
<!-- STATIC FOOTER -->
<div id="pageFooter">
<table class="table">
<tr>
<td>Static footer content here</td>
</tr>
</table>
</div>
I was reading about running headers and footers following answer on this question but I don't get the desired results. Currently my CSS is set like this:
#pageHeader, #pageFooter { display: none; }
@media print {
#pageHeader { display: block; position: running(pageHeader); width: 100%; }
#pageFooter { display: block; position: running(pageFooter); width: 100%; }
}
@page {
@top-center {
content: element(pageHeader);
}
@bottom-center {
content: element(pageFooter);
}
}
Firefox gives me completely strange results. It first prints a blank page, then the second page is ok if it's a single page document, if it's a multi-page document then it only prints first page, other pages are ignored.
Google Chrome is slightly better. It prints all pages but it wont print static header and footer on every page. Header is printed only on first page, while footer only on last page.
Also the other problem is that the main table that can spread trough several pages does not print table header in every page if the table spreads trough multiple pages. I thought that display:table-header-group; on <thead> supposed to do that?
Is this just impossible to achieve or am I doing something completely wrong? If you can give me any advice or strategy on how to handle this I will be very happy. Since this app is running in controlled environment I can focus on one or two browsers (Chrome and Firefox would be great). If it works in both is bonus!
