Add a Total Pages indicator using CSS on the <thead> of the printed document?

Question

I changed the CSS pagination solution for my webpage.

It automatically displays “Page 1,” “Page 2,” etc. I would like it to show "Page 1 of 5", "Page 2 of 5", etc.

Here is my current code example : ( Demo )

@media print { thead span.page-number:after { counter-increment: page; content: "Page " counter(page) " of ?"; } } 

HTML: (forgive me for using tables, not CSS display: table-header-group )

 <table> <thead> <tr> <td> <span class="page-number"></span> </td> </tr> </thead> <tbody> <tr> <td> .............................................................. </td> </tr> </tbody> </table> 

Can I add a total page count instead of mine ? ?

I'm only interested in the latest version of Firefox or Chrome.

My current solution so far has been to use the server to create one element per page, but it is much harder to get the optimal pagination this way. The <thead> solution is much simpler.

Answer 1

You can use the counter (pages). Here is an example

 thead span.page-number:after { counter-increment: page; content: "Page " counter(page) " of " counter(pages); } 

Answer 2

Although this is not a pure CSS response, with a little javascript and assuming that each new page / break point will be represented by a div / span / td element or other HTML object with a "common class name" contained in each of them. You can get the total number of pages like this.

 <div class="xxx"></div> <div class="xxx"></div> <div class="fff"></div> <div id="footer"> <script type="application/javascript"> aaa = document.getElementsByClassName("xxx").length; document.write(aaa); </script> </div> 

In the above example, this will cause number 2 to be displayed in the browser at the point where the script is inserted, since the script counts the number of times xxx is displayed as a class in any element of the document.