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

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

在将 HTML 表格导出为 PDF（例如通过浏览器「打印 → 保存为 PDF」）时，若表格内容过长导致跨页，原生

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

默认仅在第一页显示表头（），后续页面无标题行，严重影响可读性。幸运的是，现代主流浏览器（Chrome、Edge、Firefox、Safari）均支持通过标准 HTML 结构 + CSS 打印样式实现跨页表头自动复现——关键在于语义化标记与合理样式配置。

✅ 正确的 HTML 结构是前提

必须严格分离表头与数据体：用

包裹标题行，

包裹所有数据行（支持多个 ，但至少一个）。避免将表头写在 内或使用纯

模拟表格。

<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 印刷样式增强稳定性

虽然

在多数场景下开箱即用，但为确保跨浏览器一致性（尤其 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;
  }
}

⚠️ 注意事项：

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

• display: table-header-group 是核心声明，它告诉打印引擎将

视为可重复的页眉容器；

避免对

设置 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 语义规范与浏览器打印引擎的设计约定。只需正确使用

+

结构，并辅以轻量级 @media print 样式，即可零成本达成专业排版效果——既符合 Web 标准，又具备出色的兼容性与可维护性。