How to use CSS counter increment for dynamic page numbers

Issue

I am trying to add page numbers to my html print out and came across Counter Increment. I tried using it for my pages, but it is only showing Page 1 every time. Help would be appreciated.

P.S. I have already tried following other solutions similar to mine, but none work so far. My case is different because I am using it inside of a table header.

.page-number{
    text-align:center;
}
thead {
    display:table-header-group;
}

@media print{
     .page-number:before{
        counter-increment: page;
        content: "Page " counter(page);
     }
   }
@media screen{
    .page-number:before {
        counter-increment: page;
        content: "Page " counter(page);
        }
     }

<table class="SetupMainTable">
  <thead>
    <tr>
       <td colspan="4">Company Name</td>
       <td colspan="5" class="right" style="font-size:25px;">Daily Time Ticket</td> 
       <td colspan="1"><div class="page-number"></div></td>
    </tr>
  </thead>
</table>  

Eg:Example that print’s same Page 1 on all pages

• Code editor link
• Code editor Preview link – just press ctrl+p to test

Expected Answer

It Should print incremental Page 1 Page 2 Page 3 number on all pages after pressing ctrl + p Print

Long story short:

Press Ctrl + P → Print current window → Add a footer in the bottom of the page(Current Window) like Page <counter> counter is a number starting from 1 .

So the Page will be like

PS: Counter shouldn’t visible on the page 😀

Solution

So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.

I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.

This solved my issue, https://stackoverflow.com/a/13496899/6000966.

I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.

I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.

Static pages on the other hand should work with the above answers.

Answered By – Stephen Romero

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0