Напечатайте номер страницы, используя CSS

Question

Я просто хочу напечатать номера страниц, используя медиа-печать. Я пробовал все решения Stack Overflow, и у меня никто не работает.

.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>

И я не получаю ожидаемого вывода, только первая страница увеличивается, а остальные страницы имеют тот же номер. Пожалуйста, предложите мне хорошее решение.