How to use page number in thead?

Question

I want use page number in thead. I use this code:

@media print {
body { margin: 0; }
thead { counter-reset: pages; }
.page-number:before { counter-increment: pages; content: " "; }
.page-number:after { counter-increment: page; }
.page-number:after { content: "Page " counter(page) " of " counter(pages); }
}

But this not working in chrome.

demo

I think chrome has some limitations, do you strictly want to stay on the CSS part? because you can use javascript as well to dynamically add page number. — moaz ahmad, Jun 30 '23 at 12:35
@moazahmad: I have no problem with any trick that can solve my need. — Ashin Best, Jun 30 '23 at 12:43
Seems to work ok on your fiddle in Chrome 114.0.5735.199 on Windows. — freedomn-m, Jun 30 '23 at 13:12
@freedomn-m: I use the same version, but when printing, 'Page 1 of 1' is displayed on all pages — Ashin Best, Jun 30 '23 at 13:22
it could help: https://stackoverflow.com/questions/56402991/how-to-use-css-counter-increment-for-dynamic-page-numbers — sylvain, Jul 02 '23 at 07:52
...and: https://stackoverflow.com/questions/7174359/how-to-do-page-numbering-in-header-footer-htmls-with-wkhtmltopdf/13496899#13496899 — sylvain, Jul 02 '23 at 07:52
@sylvain: The first link you sent is the demo of my question — Ashin Best, Jul 04 '23 at 16:25

sylvain · Answer 1 · 2023-07-02T08:11:13.870

0

This way:

<table>
  <thead>
    <tr>
      <th>
        <div class="page-number"></div>
      </th>
      ...
    </tr>
  </thead>
...
</table>

@media print {

  thead {
    counter-reset: pages;
  }

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

Or using javascript:

 <script>
    window.onload = function() {
      var pageNumbers = document.getElementsByClassName('page-number');
      var pageCount = pageNumbers.length;
      
      for (var i = 0; i < pageCount; i++) {
        pageNumbers[i].textContent = 'Page ' + (i + 1) + ' of ' + pageCount;
      }
    };
  </script>

edited Jul 02 '23 at 08:11

answered Jul 02 '23 at 07:56

sylvain

853
1
7
20

If you test the proposed method, you will see that it shows the number 1 on all pages. I tested many of the suggested methods on the site, but all of them do not work in the latest versions of the Chrome browser. – Ashin Best Jul 04 '23 at 16:27

How to use page number in thead?

1 Answers1