<thead>本身不自动跨页重复，必须配合@media print中thead{display:table-header-group}和tbody tr{break-inside:avoid}才能实现每页表头重复，且需避免overflow:hidden、flex布局等破坏表格语义的样式。
打印时表头不重复？<thead> 本身不自动跨页重复
浏览器原生不支持仅靠 <thead> 实现打印分页时每页顶部自动显示表头。这是最常见的误解——很多人以为只要写了 <thead>，打印预览里就会每页都带表头，结果发现只有第一页有，后面全是光秃秃的 <tbody> 数据。
根本原因：CSS 打印样式默认不启用表头重复行为，且不同浏览器对 thead 的分页处理不一致（Chrome 有一定支持但不可靠，Firefox / Safari 基本忽略）。
可行解法是用 CSS 强制声明，而非依赖 HTML 结构本身：
- 必须给
<thead>添加display: table-header-group - 配合
page-break-inside: avoid或break-inside: avoid防止表头被截断 - 确保
<tbody>中的行不强制撑满单页（否则表头可能被挤到下一页开头）
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>就只是普通块级容器 -
break-inside: avoid加在tr上比加在tbody上更稳定；若用旧写法，可降级为page-break-inside: avoid（Safari 15.6 及更早需此） - 避免对
thead设置position: fixed或display: block，这会直接破坏表结构语义和打印行为
长表格实际打印卡顿或错位？检查这些隐藏陷阱
即使加了正确 CSS，仍可能出现表头只出现在第一页、或数据行被撕裂的情况，常见于：
-
<table>外层有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中未重定义，导致样式丢失，间接影响表头渲染
需要兼容老版本 IE？别用 <thead> 打印重复
IE 11 及更早版本完全不支持 display: table-header-group 在打印中的作用，也无视 break-inside。如果项目仍需支持 IE：
- 放弃纯 CSS 方案，改用 JavaScript 动态拆分
<tbody>，每页手动插入一份<thead>（生成多个独立<table>） - 或导出为 PDF（通过 jsPDF + autoTable），绕过浏览器打印限制
- 在打印样式中对
thead使用visibility: hidden，改用::before伪元素在每页顶部生成文字表头（仅适合静态、无样式需求的场景）
真正稳定可靠的跨页表头，永远依赖 CSS 的 display: table-header-group + 行级防断页控制，而不是 HTML 标签是否存在 <thead>。
