HTML打印视图添加页码：thead/tfoot重复页眉页脚的CSS实现问题

你遇到的问题是浏览器对表格重复元素（tfoot）的计数器处理逻辑不一致导致的。以下是两种可行的解决方案：

方案一：利用@page规则在页脚下方添加页码（推荐） #

这种方式依赖CSS打印规范的@page区域，浏览器支持更稳定，能确保页码在每页页脚之后显示：

/* 初始化页码计数器，从0开始，保证第一页显示1 */
body {
  counter-reset: page 0;
}

/* 设置打印页面边距，底部预留足够空间容纳页脚和页码 */
@page {
  margin: 2cm 2cm 3cm; /* 可根据实际排版调整数值 */
  
  /* 在页面底部居中位置生成页码，与页脚拉开距离 */
  @bottom-center {
    content: "第 " counter(page) " 页";
    margin-top: 1cm;
    font-size: 14px;
  }
}

/* 确保表格页眉页脚在打印时每页重复 */
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

方案二：调整tfoot的计数器逻辑 #

如果必须通过tfoot的伪元素实现，需要修正计数器的触发时机，避免浏览器渲染差异：

/* 初始化计数器 */
body {
  counter-reset: page 0;
}

/* 设置打印页面边距 */
@page {
  margin: 2cm;
}

/* 每页渲染tfoot时递增计数器 */
tfoot {
  counter-increment: page;
  display: table-footer-group;
}

/* 在tfoot末尾添加页码，确保在页脚内容之后 */
tfoot::after {
  content: "第 " counter(page) " 页";
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  border-top: 1px solid #ccc;
  padding-top: 8px;
}

thead {
  display: table-header-group;
}

table {
  width: 100%;
  border-collapse: collapse;
}

为什么之前的代码失效？ #

• Chrome中页码全为1：因为tfoot:after中的counter-increment在表格重复渲染时，计数器没有被正确递增（Chrome对表格重复元素的伪元素计数器处理存在bug），将递增逻辑移到tfoot本身可解决。
• Firefox第一页显示2：因为未手动初始化计数器为0，浏览器默认可能从1开始，递增后变成2，添加counter-reset: page 0即可修正。

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