thead 是浏览器打印时跨页重复表头的唯一可靠信号，其生效依赖结构正确性与@media print中display:table-header-group等样式配合，且高度不得超过单页表格高度的25%。
thead 标签在打印分页中的真实作用
thead 不是“可有可无的语义标签”，而是浏览器打印引擎识别跨页重复表头的**唯一可靠信号**。当表格内容撑满多页时，Chrome、Edge、Firefox 等现代浏览器（以及基于 Chromium 的 Puppeteer、wkhtmltopdf v0.12.6+）会主动将 thead 内容复制到每一页顶部——但这个行为**完全依赖结构正确性**，不靠 JS、不靠 hack，纯 HTML + CSS 规范驱动。
为什么 thead 有时只在第一页显示
常见失效现象：表格很长，但只有第一页有表头，后续页面空白。根本原因不是浏览器不支持，而是以下任意一条被触发：
-
thead内部包含过高的元素（如大字号、大 padding、图片），导致其视觉高度超过整张表格在单页内所占高度的 25% —— 这是 Chromium 渲染器的硬性限制，非 bug，是设计约束 -
thead被包裹在tbody里，或整个thead被 CSS 设置了display: block/position: absolute/float，破坏了表格布局模型 - 省略了
tbody标签，或把数据行直接写在table下（即没有明确的表体容器），浏览器无法区分“头”与“身” - 用了多个
thead（HTML 规范只允许一个），后出现的会被忽略
必须加的 @media print CSS 才能稳住效果
仅靠 thead 标签本身，在 Chrome 115+ 及新版 PDF 工具中已基本可用，但加几行打印专用样式能显著提升鲁棒性：
推荐最小集合：
@media print {
thead { display: table-header-group; }
tbody { display: table-row-group; }
table { page-break-inside: avoid; }
}
说明：
-
display: table-header-group是显式激活重复机制的关键，尤其对旧版 wkhtmltopdf 或某些 Puppeteer 配置生效 -
page-break-inside: avoid防止某一行tr被强行断成两半（比如姓名+地址被切在两页），但它**不能强制分页**，只是“尽量避免” - 不要给
thead设height或固定line-height过大，优先用font-size: 12px、padding: 4px 8px控制紧凑度
每页顶部加额外信息（如公司名、报表标题）怎么搞
不能靠 position: fixed 在打印中“模拟页眉”——它在多数浏览器打印预览里表现不稳定，常只出现在第一页，或与表格重叠。
更可靠的做法是把额外信息塞进 thead 本身：
- 在
thead里加一个独立的tr，放 logo 文字或日期，用th包裹并设colspan覆盖全部列 - 确保这一行高度也计入 25% 限制，所以文字要简短、字号别超 14px
- 如果必须动态生成（比如 Vue 中绑定日期），直接插在
thead第一行即可，不影响语义和渲染逻辑
复杂点在于：一旦你加了两行表头（一行标题 + 一行字段名），它们会一起重复，且共用 25% 高度预算。容易被忽略的是——thead 的“高度”不是像素值，而是它在当前分页上下文里所占的**相对渲染空间比例**，受字体、行高、边框、缩放等共同影响，调试时得真打 PDF 看效果，不能只信浏览器打印预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
