如何在thead中使用页码？Chrome下代码失效问题求助

你的代码在Chrome中失效的核心原因是：打印时thead会在每一页重复渲染，导致counter-reset: pages被反复执行，总页数计数器无法正确累加。另外，page是浏览器内置的打印计数器，不需要手动用counter-increment触发。

以下是修正后的方案：

纯CSS+JS实现完整页码（当前页/总页数） #

CSS代码 #

@media print {
  body { margin: 0; }
  
  .page-number:after {
    /* 直接使用浏览器内置的page计数器显示当前页码 */
    content: "Page " counter(page) " of ";
  }
  /* 通过自定义属性展示预计算的总页数 */
  .total-pages:after {
    content: attr(data-total);
  }
}

JS代码（计算总页数） #

// 打印前计算总页数并赋值
window.addEventListener('beforeprint', () => {
  const pageHeight = window.innerHeight;
  const totalContentHeight = document.body.offsetHeight;
  const totalPages = Math.ceil(totalContentHeight / pageHeight);
  document.querySelector('.total-pages').setAttribute('data-total', totalPages);
});

使用时只需在thead的页码元素中添加结构：

<div class="page-number"></div><span class="total-pages"></span>

纯CSS替代方案（限固定结构表格） #

如果你的表格每页结构固定（比如每页固定行数），可以调整计数器逻辑避免重复重置：

@media print {
  body { margin: 0; }
  /* 仅在根元素初始化总页数计数器 */
  html { counter-reset: total-pages; }
  /* 让表格每行累加总页数计数器（按实际每页行数调整） */
  tr { counter-increment: total-pages; }
  
  .page-number:after {
    content: "Page " counter(page) " of " counter(total-pages);
  }
}

注意：这个方案仅适用于内容高度完全可控的场景，兼容性不如JS辅助方案稳定。

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