如何在HTML表格页脚显示页码？解决Chrome浏览器下页码重复问题

问题原因排查 #

1. 基础语法/结构错误：
   • HTML中div的id属性多写了#，id="#pageFooter"应改为id="pageFooter"，#是CSS选择器的标识，不能写在HTML的id属性值里
   • tbody结束标签写成了起始标签<tbody>，需改为</tbody>，结构异常会导致打印渲染逻辑出错
2. CSS计数器作用域问题：你把counter-reset: page写在了table选择器下，整个表格的计数器只会初始化一次。Chrome打印时重复渲染的tfoot属于同一个table的子元素，每次计数器自增都是基于同一个初始值，不会跨页保存计数状态，所以每一页都会显示相同的页码
3. @page规则不生效的核心原因：Chrome默认开启了浏览器自带的页眉页脚，自定义的@page页边距和页脚内容会被自带页眉页脚覆盖，需要手动关闭浏览器默认页眉页脚才能生效

解决方案1：使用@page规则实现全局页码（最简单稳定） #

这个方案兼容性最好，不需要依赖表格计数器：

1. 先修改CSS代码，补充页边距预留页脚空间：

@page {
  size: A4;
  margin: 20mm 10mm 20mm 10mm; /* 底部留20mm高度放页脚，避免内容遮挡 */
  @bottom-left {
    content: "Page " counter(page) " of " counter(pages); /* 可按需添加总页数显示 */
  }
}
/* 删掉原来table、#pageFooter相关的计数器规则即可 */

2. 打印时的设置：Chrome打印预览界面点击「更多设置」，取消勾选「页眉和页脚」，即可看到自定义的页码。

解决方案2：在表格tfoot内显示页码（满足自定义表格页脚需求） #

如果必须把页码放在表格的页脚区域，需要调整计数器的作用域逻辑，用打印分页元素触发计数器更新：

1. 首先修改HTML结构，每满一页的内容后插入分页标识：

<table>
<thead>
    some header here...
</thead>
<tbody>
    第一页的表格行...
    <div class="page-break"></div>
    第二页的表格行...
    <div class="page-break"></div>
    <!-- 更多页内容 -->
</tbody>
<tfoot>
    <div id="pageFooter"></div>
</tfoot>    
</table>

2. 配套CSS代码：

/* 全局初始化页码计数器 */
body {
  counter-reset: page 1;
}
/* 分页符触发页码自增，同时强制分页 */
.page-break {
  page-break-after: always;
  counter-increment: page;
}
tfoot{
  display: table-footer-group;
}
#pageFooter:after{
  content: "Page " counter(page);
}

如果你的表格行是动态生成的，可以用JS计算行高判断分页位置，自动插入.page-break元素即可。

内容的提问来源于stack exchange，提问作者Karthy