通过正确使用HTML的<thead>和<tbody>语义化标签，并配合CSS打印媒体查询，可实现在导出为多页PDF时每页顶部自动重复显示表格标题行。
通过正确使用html的``和`
`语义化标签，并配合css打印媒体查询，可实现在导出为多页pdf时每页顶部自动重复显示表格标题行。在将HTML页面导出为PDF（例如通过浏览器“打印→另存为PDF”、Puppeteer、wkhtmltopdf等工具）时，若表格内容过长导致跨页，原生HTML表格默认仅在第一页显示<tr>中的表头，后续页面无表头——这严重影响可读性与专业性。幸运的是，现代主流PDF生成引擎（包括Chrome/Edge内置打印、wkhtmltopdf v0.12.6+、WeasyPrint等）均支持基于语义化标签的自动分页表头重复机制，其核心在于严格遵循HTML表格结构规范。
✅ 正确做法是：
- 将表头行包裹在 <thead> 中；
- 将主体数据行统一置于 <tbody> 内（避免混用多个<tbody>或遗漏标签）；
- 确保 <table> 具有明确的语义结构，不依赖CSS模拟表格（如display: table）；
- 可选但推荐：添加 @media print 样式增强控制（例如固定表头高度、避免分页断行）。
以下是一个最小可行示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 推荐：防止表头与首行数据被分页割裂 */
@media print {
thead { display: table-header-group; }
tbody { display: table-row-group; }
tr { break-inside: avoid; }
/* 可选：确保表头始终可见 */
thead th,
thead td {
background-color: #f5f5f5;
font-weight: bold;
}
}
/* 屏幕样式（不影响PDF） */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; border: 1px solid #ddd; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>单价（元）</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<!-- 此处插入大量数据行（如100+行），确保触发分页 -->
<tr><td>1</td><td>笔记本电脑</td><td>5999</td><td>42</td></tr>
<tr><td>2</td><td>无线鼠标</td><td>89</td><td>156</td></tr>
<!-- ... 更多行 -->
</tbody>
</table>
</body>
</html>⚠️ 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- <thead> 必须是 <table> 的直接子元素，且仅出现一次；
- 部分旧版工具（如极早期wkhtmltopdf）需启用 --enable-smart-shrinking 或设置 page-break-inside: avoid 辅助；
- 不要使用 position: sticky 或 JavaScript 动态克隆表头——PDF生成器无法执行JS，且sticky在打印媒体中无效；
- 若使用Puppeteer，建议启用 printBackground: true 并确保 format: 'A4' 等参数一致；
- 测试时务必通过浏览器「打印预览」验证效果，而非仅看屏幕渲染。
总结：无需复杂脚本或CSS hack，只需回归HTML语义本质——用对 <thead> 和 <tbody>，再辅以标准打印样式，即可让PDF中的长表格每页自动携带表头，显著提升文档专业度与用户体验。
