JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="window.print();">Print</button>
<table class="report-table">
<thead class="report-header">
<tr colspan="3"> Category </tr>
<tr>
<th>content</th>
<th>content</th>
<th><span class="page-number"></span></th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td></td>
<td>total</td>
<td>$ 0,00 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr><tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr><tr>
...
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;
}