本身不自动跨页重复，必须配合@media print中thead{display:table-header-group}和tbody tr{break-inside:avoid}才能实现每页表头重复，且需避免overflow:hidden、flex布局等破坏表格语义的样式。
打印时表头不重复？<thead> 本身不自动跨页重复
<p>浏览器原生不支持仅靠 <code><thead> 实现打印分页时每页顶部自动显示表头。这是最常见的误解——很多人以为只要写了 <code><thead>，打印预览里就会每页都带表头，结果发现只有第一页有，后面全是光秃秃的 <code><tbody> 数据。
<p>根本原因：CSS 打印样式默认不启用表头重复行为，且不同浏览器对 <code>thead 的分页处理不一致（Chrome 有一定支持但不可靠，Firefox / Safari 基本忽略）。
可行解法是用 CSS 强制声明，而非依赖 HTML 结构本身：
- 必须给
<thead> 添加 <code>display: table-header-group - 配合
page-break-inside: avoid或break-inside: avoid防止表头被截断 - 确保
<tbody> 中的行不强制撑满单页（否则表头可能被挤到下一页开头） <h3> <code>thead打印重复的最小可靠 CSS 规则以下规则在 Chrome、Edge、Firefox（102+）、Safari（16.4+）打印预览中实测有效：
@media print { thead { display: table-header-group; } tbody tr { break-inside: avoid; } }注意两点关键细节：
-
display: table-header-group是核心，它告诉浏览器“这个区域应像原生表头一样在每页顶部渲染”，没有它，<thead> 就只是普通块级容器 <li> <code>break-inside: avoid加在tr上比加在tbody上更稳定；若用旧写法，可降级为page-break-inside: avoid（Safari 15.6 及更早需此） - 避免对
thead设置position: fixed或display: block，这会直接破坏表结构语义和打印行为 <table> 外层有 <code>overflow: hidden或transform（如scale(0.9)），会干扰打印布局计算-
tbody tr内部用了flex或grid布局，导致break-inside: avoid失效（必须保持display: table-row语义） - 某行
height设得过大（如height: 100vh），或含未限制高度的图片/iframe，造成单行超页，浏览器放弃分页保护 - 使用了 CSS 自定义属性（
var(--header-bg)）在@media print中未重定义，导致样式丢失，间接影响表头渲染 - 放弃纯 CSS 方案，改用 JavaScript 动态拆分
<tbody>，每页手动插入一份 <code><thead>（生成多个独立 <code><table>） <li>或导出为 PDF（通过 jsPDF + autoTable），绕过浏览器打印限制</li> <li>在打印样式中对 <code>thead使用visibility: hidden，改用::before伪元素在每页顶部生成文字表头（仅适合静态、无样式需求的场景）
长表格实际打印卡顿或错位？检查这些隐藏陷阱
即使加了正确 CSS，仍可能出现表头只出现在第一页、或数据行被撕裂的情况，常见于：
需要兼容老版本 IE？别用
<thead> 打印重复 <p>IE 11 及更早版本完全不支持 <code>display: table-header-group在打印中的作用，也无视break-inside。如果项目仍需支持 IE：真正稳定可靠的跨页表头，永远依赖 CSS 的
display: table-header-group+ 行级防断页控制，而不是 HTML 标签是否存在<thead>。</thead> -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
