Problem with CSS page numbering in print view

Question

I have a report where several tables are created separated by categories with specific header and footer that repeat.

I need to add a page numbering for the categories where in each new category this numbering is restarted and because of the variation in size and number of lines ends up making it impossible to do this counting via back-end.

To solve this situation I thought of using CSS "Counters" counters for page counting. Only I found a problem in the print view, since it is not possible to determine how many times the header or footer will repeat to make this page count.

In the print view you are not increasing the number of pages according to the table header. I tried using CSS @Page to increment the pages and use counter-reset on each table to restart the numbering, but the real problem is increasing the numbering of pages according to the category.

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

https://jsfiddle.net/7prs03eh/2/