如何对动态页码使用 CSS 计数器增量

Question

我正在尝试将页码添加到我的 html 打印输出中，但遇到了Counter Increment. 我尝试将它用于我的页面，但它只是Page 1每次都显示。帮助将不胜感激。

PS我已经尝试过遵循与我类似的其他解决方案，但到目前为止都没有奏效。我的情况不同，因为我在表头中使用它。

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

---

例如：Page 1 在所有页面上打印相同的示例

• 代码编辑器链接
• 代码编辑器预览链接 - 只需按下ctrl+p即可测试

预期答案

按打印后，它应该在所有页面上打印增量 Page 1 Page 2 Page 3编号ctrl + p

---

长话短说：

按Ctrl+ P? 打印当前窗口？在页面底部（当前窗口）添加一个页脚，就像Page <counter> counter一个从 1 开始的数字。

所以页面会像

PS：计数器不应该在页面上可见

Answer 1

所以我永远无法让它适用于我的情况。我知道其他情况可能适用于上述答案，但我无法单独让前端生成动态页码。

我使用了后端的帮助，在我的例子中是 PHP，并使用了一个名为wkhtmltopdf的插件。

这解决了我的问题，/sf/answers/944782961/。

我能够从前端删除逻辑并将其放置在后端并让它处理动态页码。

如果 HTML 页面使用来自后端的动态数据，我会建议，类似这样的方法就是可行的方法。

另一方面，静态页面应该适用于上述答案。