0

I just want to print page numbers using media print. I have tried all Stack Overflow solutions and no one work for me.

.page-footer::before {
  position: relative;
  bottom: -52px;
  left: 90%;
  counter-increment: page;
  content: "Page " counter(page);
} 
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right:0; 
  width: 98.5%;
  height: 70px;
  counter-reset: page;
}
body {
  -webkit-print-color-adjust: exact;
  margin: 0;
  counter-reset: page;
}
<div class="page-footer">
    <table style="width: 100%; border-top: 1px solid black; border-collapse: collapse !important;">
        <tr>
            <td style="width: 100%; padding: 10px; font-family: Times New Roman, serif; font-size: 25px; font-weight: bold;" align="center">Footer</td>
            <td id="datetime"></td>
        </tr>
    </table>
</div>

And I m not getting output as expected, only first page is increment and rest of the pages follow the same number. Please suggest me a good solution.

5
  • 3
    Just because you are using the same CSS on both HTML pages does not mean the CSS shares memory.
    – StackSlave
    May 29, 2020 at 3:06
  • sorry my friend, I don't have much time to spend on this, but I was looking into this: jsfiddle.net/LeonVFX/zscoopoc which might help, simple need small amount of js/jQuery.
    – ROOT
    May 29, 2020 at 5:57
  • @ROOT, i have tried this already but no worries thanks for your valuable time. May 29, 2020 at 6:09
  • @StackSlave, whats your suggestion to solve this issue sir May 29, 2020 at 6:10
  • Don't even use CSS, like that. Just put the numbers on the pages in HTML.
    – StackSlave
    May 29, 2020 at 10:08

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.