I have a report where multiple tables are created separated by categories with specific header and footer that repeat.
I need to add a numbering of pages to the categories where in each new category this numbering is restarted and because of the variation of size and number of lines, it is impossible to make this count via the back end.
To solve this situation, I thought about using the CSS Counters counters for the page count. But I found a problem in print preview, since you can not determine how many times the header or footer will repeat to do this page count.
In Print Preview you are not incrementing the number of pages as per the table header. I tried to use @Page CSS to increment the pages and use the counter-reset in each table so that the numbering would be restarted, but the problem is to increase page numbering accordingly.
CSS
.report-table {
page-break-after: always;
counter-reset: page;
}
.report-header {
display: table-header-group;
}
.report-header tr th span.page-number:after {
counter-increment: page;
content: "Pag:" counter(page);
}
.report-footer {
display: table-footer-group;
}HTML
<button onclick="window.print();">Print</button>
<table class="report-table">
<thead class="report-header">
<tr>
<th>conteudo</th>
<th>conteudo</th>
<th><span class="page-number"></span></th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td></td>
<td>valor</td>
<td>$ 0,00 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>conteudo</td>
<td>conteudo</td>
<td>conteudo</td>
</tr>
<tr>
<td>tabela</td>
<td>longa</td>
<td>aqui</td>
</tr>
<tr>
<td>conteudo</td>
<td>conteudo</td>
<td>conteudo</td>
</tr>
</tbody>
</table>JSFiddle