如何在多页 PDF 中自动重复显示 HTML 表格表头

通过正确使用 <thead> 和 @media print 样式，可实现在导出为 PDF 时让 HTML 表格的表头在每一页顶部自动重复显示，提升可读性与专业性。

通过正确使用 `` 和 `@media print` 样式，可实现在导出为 pdf 时让 html 表格的表头在每一页顶部自动重复显示，提升可读性与专业性。

在将 HTML 页面导出为 PDF（例如通过浏览器“打印为 PDF”功能、Puppeteer、wkhtmltopdf 等工具）时，长表格跨页显示是一个常见但易被忽视的体验痛点：仅第一页显示 <th> 或首行标题，后续页面缺失表头，导致读者需反复翻页确认字段含义。幸运的是，现代主流 PDF 生成引擎（基于 Chromium、WebKit 或支持 CSS Paged Media 的渲染器）已原生支持 <thead> 的跨页重复机制——前提是语义结构正确且无破坏性样式干扰。

✅ 正确的 HTML 结构是前提

必须使用语义化标签明确划分表头与表体：

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>部门</th>
      <th>入职日期</th>
      <th>薪资（元）</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>张三</td><td>技术部</td><td>2022-03-15</td><td>18500</td></tr>
    <tr><td>2</td><td>李四</td><td>市场部</td><td>2022-06-22</td><td>15200</td></tr>
    <!-- 更多数据行... -->
  </tbody>
</table>

⚠️ 注意：

• 不要将 <thead> 写在 <tbody> 内部或省略 <tbody>；
• 避免对 <thead> 设置 display: block、position: absolute 或 float 等会破坏表格布局模型的 CSS；
• 每个 <table> 最多一个 <thead>（重复定义无效）。

✅ 补充打印样式增强兼容性

虽然 <thead> 在多数场景下开箱即用，但建议添加以下 @media print 规则以强化行为并适配边缘情况：

Insou AI

Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

下载

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

@media print {
  /* 确保表头始终显示（部分旧版引擎需要） */
  thead { display: table-header-group; }

  /* 可选：固定表头高度，避免因字体渲染差异导致分页错位 */
  thead tr { page-break-inside: avoid; }

  /* 防止整行被截断（提升可读性） */
  tbody tr { page-break-inside: avoid; }

  /* 若需表尾也重复（如汇总行），可用 tfoot + display: table-footer-group */
  tfoot { display: table-footer-group; }
}

? 实际效果验证建议

1. 在 Chrome / Edge 浏览器中按 Ctrl+P（Windows）或 Cmd+P（macOS），选择“另存为 PDF”，检查生成的 PDF 是否每页顶部均出现完整表头；
2. 若使用 Puppeteer，确保启用 printBackground: true 并设置 format: 'A4'；
3. wkhtmltopdf 用户需添加 --enable-smart-shrinking 参数，并确认版本 ≥ 0.12.6。

? 进阶提示

• 不支持 <thead> 自动重复的旧工具（如某些 Java PDF 库）：需借助 JavaScript 动态克隆表头插入每页对应位置（复杂度高，非首选）；
• 复杂表头（合并单元格）：<thead> 中的 colspan/rowspan 通常被良好支持，但避免嵌套表格或 CSS Grid 布局替代原生 <table>；
• 无障碍与 SEO 友好性：语义化 <thead> 同时提升屏幕阅读器体验和搜索引擎理解力。

综上，无需 JavaScript 或服务端干预，仅靠标准 HTML 语义 + 轻量打印样式，即可优雅解决多页 PDF 表头复现问题——这是 Web 标准赋能文档输出的典型实践。