Adding page numbers when printing html with auto page-break - html

Question

I want to print an HTML page with the page numbers on each page. My HTML consists of a table with rows of varying sizes. So I can not tell when a page-break will occur. I just used "page-break-inside: avoid;" in the row cause I don't want to break inside the row.
I tried using #page attribute but its not working.
#page {
size: A4 portrait;
margin: 11mm 17mm 17mm 17mm;
counter-increment: page;
#bottom-left {
content: counter(page);
}
}
#page:first {
counter-reset: page 1;
}
I tried using after footer or header but doesn't work either. The thead appears to print on each page but just count once. So I can't use it as counter-increment. Stays always as Page 1. The same for the footer.
My problem is where to put the counter-increment. I don't have a specific element to control the page-breaks.
HTML:
<table>
<thead>
<tr>
<td>
<div class="header-space">
<%-- header code --%>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="content">
<div class="content-block">
<p>
<asp:Repeater ID="rptTeste" runat="server" OnItemDataBound="rptTeste_ItemDataBound">
<ItemTemplate>
<div id="divQuestao">
<%-- rows of variate sizes code --%>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="footer-space">
<%-- footer code --%>
</div>
</td>
</tr>
</tfoot>
</table>
CSS:
#media print {
#page {
size: A4 portrait;
margin: 11mm 17mm 17mm 17mm;
}
body {
float: none;
margin-left: 0;
margin-top: 0;
counter-reset: page;
}
.header-space,
.footer-space {
height: 150px;
}
.footer-space::after {
top: 0px; position: relative;
white-space: nowrap;
z-index: 20; width:100%; margin:0 auto; text-align:center;
counter-increment: page;
content:"Page " counter(page);
}
#divQuestao {
page-break-inside: avoid;
padding-top: 30px;
text-align: justify;
}
}
It suppossed to be so easy to show the page number when printing! But it's not!!