如何阻止HTML表格表头在打印时每页重复显示？

问题根源 #

浏览器默认会给跨页的表格自动重复表头，这是因为<thead>元素在打印样式里的默认值是display: table-header-group，这个规则强制表头在每页顶部重复渲染。

修复方案 #

通过自定义打印样式覆盖浏览器默认行为，就能让表头和标题仅在第一页显示：

• 添加打印专用的CSS规则
  在你的样式表中加入这段代码：

@media print {
  /* 取消表头跨页重复 */
  thead {
    display: table-row-group;
  }

  /* 若表格用<caption>做标题，确保它只在第一页显示 */
  caption {
    break-after: avoid;
  }
}

• 额外适配细节
  • 如果你的表头没有用<thead>包裹，而是直接用<th>放在表格第一行，先把表头行移入<thead>标签内，再用上述样式控制才会生效。
  • 针对部分浏览器可能出现的表头拆分问题，可以给<thead>追加page-break-inside: avoid，确保表头完整显示在第一页：

@media print {
  thead {
    display: table-row-group;
    page-break-inside: avoid;
  }
}

设置完成后，打印预览里的表格就只会在起始页显示标题和表头，后续分页的表格不再重复渲染它们。

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