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

使用 <thead> 配合 @media print 样式，可让浏览器在生成多页 PDF 时自动在每页顶部重复渲染表格标题行，无需 JavaScript 或第三方库干预。

使用 `` 配合 `@media print` 样式，可让浏览器在生成多页 pdf 时自动在每页顶部重复渲染表格标题行，无需 javascript 或第三方库干预。

在将 HTML 表格导出为 PDF（例如通过浏览器「打印 → 保存为 PDF」）时，若表格内容过长导致跨页，原生 <table> 默认仅在第一页显示表头（<tr>），后续页面无标题行，严重影响可读性。幸运的是，现代主流浏览器（Chrome、Edge、Firefox、Safari）均支持通过标准 HTML 结构 + CSS 打印样式实现跨页表头自动复现——关键在于语义化标记与合理样式配置。

✅ 正确的 HTML 结构是前提

必须严格分离表头与数据体：用 <thead> 包裹标题行，<tbody> 包裹所有数据行（支持多个 <tbody>，但至少一个）。避免将表头写在 <tbody> 内或使用纯 <div> 模拟表格。

<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>产品名称</th>
      <th>单价（元）</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>无线耳机</td><td>299.00</td><td>128</td></tr>
    <tr><td>2</td><td>机械键盘</td><td>599.00</td><td>42</td></tr>
    <!-- 更多行... 足够撑满多页 -->
  </tbody>
</table>

✅ 必要的 CSS 印刷样式增强稳定性

虽然 <thead> 在多数场景下开箱即用，但为确保跨浏览器一致性（尤其 Chrome 115+ 对分页控制更严格），建议添加以下打印专用样式：

@media print {
  table {
    page-break-inside: auto;
  }
  thead {
    display: table-header-group; /* 关键：强制每页重绘表头 */
  }
  tbody {
    page-break-inside: auto;
  }
  /* 可选：防止单行数据被截断 */
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}

⚠️ 注意事项：

Insou AI

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

下载

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

• display: table-header-group 是核心声明，它告诉打印引擎将 <thead> 视为可重复的页眉容器；
• 避免对 <table> 设置 page-break-inside: avoid（会阻止分页），应作用于 tr 或 tbody；
• 若使用 CSS 框架（如 Bootstrap），需检查其打印样式是否覆盖了 thead 的默认行为，必要时用 !important 强制重置；
• Safari 对 thead 分页支持稍弱，建议测试时启用「打印预览」并手动翻页验证。

✅ 实际效果验证方法

1. 在 Chrome 中打开含上述结构的页面；
2. 按 Ctrl+P（Windows）或 Cmd+P（macOS）调出打印对话框；
3. 将目标设为「另存为 PDF」，点击「保存」；
4. 用 PDF 阅读器打开生成文件，逐页检查表头是否持续出现。

总结：实现 PDF 多页表格自动续表头，本质是遵循 HTML 语义规范与浏览器打印引擎的设计约定。只需正确使用 <thead> + <tbody> 结构，并辅以轻量级 @media print 样式，即可零成本达成专业排版效果——既符合 Web 标准，又具备出色的兼容性与可维护性。