使用标准 HTML 表格语义标签（<thead> + <tbody>）并配合 @media print 样式，可让浏览器或 PDF 生成工具在分页时自动在每页顶部重复渲染表头，无需 JavaScript 或复杂 hack。
使用标准 html 表格语义标签（`` + `
`）并配合 `@media print` 样式，可让浏览器或 pdf 生成工具在分页时自动在每页顶部重复渲染表头，无需 javascript 或复杂 hack。在将 HTML 导出为 PDF（例如通过 Chrome 打印功能、Puppeteer、wkhtmltopdf 等工具）时，若表格内容过长导致跨页，常遇到一个关键体验问题：表头仅出现在第一页，后续页面缺失列标题，严重影响可读性与专业性。幸运的是，现代浏览器及主流 PDF 渲染引擎已原生支持基于语义化 HTML 的跨页表头复用——其核心在于正确使用 <thead> 和 <tbody> 结构，并辅以少量 CSS 声明。
✅ 正确的 HTML 结构是前提
必须将表头行明确包裹在 <thead> 中，主体数据置于 <tbody> 内（而非全部放在 <tr> 中或滥用 <div> 模拟表格）。如下所示：
<table class="report-table">
<thead>
<tr>
<th>订单编号</th>
<th>客户姓名</th>
<th>下单时间</th>
<th>金额（元）</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr><td>#ORD-001</td><td>张三</td><td>2024-05-01</td><td>299.00</td><td>已完成</td></tr>
<tr><td>#ORD-002</td><td>李四</td><td>2024-05-01</td><td>158.50</td><td>已发货</td></tr>
<!-- 更多行... -->
</tbody>
</table>⚠️ 注意：避免使用 display: table-row 等 CSS 模拟表格结构——这类写法不被 PDF 渲染器识别为“真实表格”，<thead> 复用机制将失效。
✅ 必备的 CSS 声明（增强兼容性）
虽然部分浏览器（如 Chrome）在打印模式下默认支持 <thead> 分页复用，但显式添加以下样式可显著提升稳定性，尤其在 Puppeteer 或 wkhtmltopdf 等服务端渲染场景中：
立即学习“前端免费学习笔记（深入）”；
@media print {
table.report-table {
border-collapse: collapse;
width: 100%;
}
table.report-table th,
table.report-table td {
padding: 8px 12px;
border: 1px solid #ccc;
}
/* 关键：确保表头在分页时保持可见 */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
/* 可选：防止表格内单元格断行错乱 */
td, th { page-break-inside: avoid; }
}其中 display: table-header-group 是触发跨页重复的核心声明——它告诉渲染引擎：“此元素应作为表头组，在每次分页时强制重绘”。
✅ 实际验证建议
- 在 Chrome 中按 Ctrl+P（或 Cmd+P）打开打印预览，观察跨页效果；
- 若使用 Puppeteer，确保启用 printBackground: true 并设置 format: 'A4'；
- 避免对 <thead> 设置 display: none、visibility: hidden 或 opacity: 0，否则复用失效；
- 不推荐使用 position: fixed 或 JS 动态克隆表头——这会破坏语义、增加维护成本且在 PDF 中通常不可靠。
总结
实现 PDF 多页表格表头自动重复，本质是回归 HTML 语义化设计原则：用 <thead> 正确标记表头，配合 @media print 下的 display: table-header-group 声明。该方案零依赖、高兼容、易维护，是 Web-to-PDF 场景下的最佳实践。只要结构规范、样式得当，即可让每一页 PDF 都清晰承载上下文信息，大幅提升文档专业度与用户阅读效率。
