仅用<thead>和<tbody>标签本身不会让表头跨页重复；必须配合CSS的display:table-header-group和@media print规则，且效果依赖浏览器渲染引擎，Chrome/Edge较可靠，Firefox有bug，Flyingsaucer需额外启用-fs-table-paginate。

直接说结论：仅用 <thead> 和 <tbody> 标签本身不会让表头跨页重复；必须配合 CSS 的 display: table-header-group（浏览器默认值）和打印媒体查询，才可能生效。但实际效果高度依赖渲染引擎——Chrome/Edge 基本可靠，Firefox 有已知 bug，而 Flyingsaucer 等 Java 渲染器需额外启用 -fs-table-paginate: paginate。

为什么在打印时有时“不重复”

浏览器对 <thead> 的跨页行为不是强制规范，而是“尽力而为”。常见失效原因包括：

• 父容器设置了 overflow: hidden 或 transform，导致 <thead> 被裁剪或脱离文档流
• 手动覆盖了 display 值，比如写成 display: block 或 display: flex
• 表格嵌套过深，或使用了 position: absolute 等破坏表格渲染上下文的样式
• Firefox 中若 <thead> 内含 flex 或 grid 子元素，会直接禁用跨页重复

@media print 中必须写的最小 CSS 集合

仅靠 HTML 结构远远不够，以下三行是打印场景下最简且必要的 CSS：

/* 必须显式声明，防止被重置 */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
@media print {
  table { page-break-inside: avoid; }
  thead > tr > * { background: #fff !important; }
}

说明：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• display: table-header-group 是关键——它告诉浏览器“这个区域要当成表头处理”，否则即使写了 <thead>，也可能被当普通 <div> 渲染
• page-break-inside: avoid 作用于 <table>，避免整张表被硬生生劈成两半（但不能保证表头一定重复）
• background: #fff !important 是为了防止某些浏览器在打印时保留深色背景，导致文字不可读

Flyingsaucer 用户注意：-fs-table-paginate 才是真解

如果你用的是 Flyingsaucer（如 iText + Flying Saucer 生成 PDF），<thead> 默认完全不跨页。必须加这个非标准但有效的扩展属性：

<table style="-fs-table-paginate: paginate">
  <thead><tr><th>姓名</th><th>金额</th></tr></thead>
  <tbody>...</tbody>
</table>

要点：

• 该属性只在 Flyingsaucer 环境下有效，浏览器中会被忽略
• 必须搭配 <thead> 使用，单独加属性无效
• 若表格内有 colspan 或 rowspan，需确保 <thead> 内单元格结构与 <tbody> 对齐，否则可能报错或渲染异常

最容易被忽略的一点：跨页表头是否生效，和表格是否“真的撑满多页”强相关。如果数据不足一页，或 <tbody> 行高被 line-height 或 padding 拉得过大导致计算错误，浏览器可能判定“无需分页”，从而跳过表头重复逻辑。建议用开发者工具的“打印预览”模式逐页检查，而不是仅看屏幕渲染效果。