如何在表格的 HTML 页脚中显示页码答案

【问题标题】：How to show Page # in HTML footer of table如何在表格的 HTML 页脚中显示页码
【发布时间】：2021-07-09 17:51:47
【问题描述】：

我正在尝试在 Chrome 中的表格页脚中显示页码。但是当我实现下面显示的 Counter 示例的 CSS 代码时。我没有显示页码。它给了我在所有页面上重复的相同数字。

我尝试了以下代码

<table>
<thead>
    some header here...
</thead>
<tbody>
    some rows here....
<tbody>
<tfoot>
    <div id="#pageFooter"></div>
</tfoot>

使用 CSS

table{
 counter-reset: page;
}
tfoot{
 display: table-footer-group;
}
#pageFooter:after{
 counter-increment: page;
 content: "Page " counter(page);
}

我也试过这种方法

@page {
@bottom-left {
 content: counter(page)
 }
}

请帮我找出解决办法

【问题讨论】：

【解决方案1】：

将 counter-reset: page; 从 <table> 移动到您的 <body> 标记。

body{
    counter-reset: page;
}

【讨论】：