HTML表格打印时控制页首重复行数应使用<thead>，而非CSS的widows属性；<thead>中所有行会在每页顶部自动重复，需确保其为<table>直接子元素且包含至少一个<tr>。
HTML表格打印时控制页首重复行数用 thead，不是 widows
“widows” 是 CSS 中用于段落排版的属性（控制分页后段首最少行数），**对表格无效**，也不能控制表格顶部在打印时重复显示多少行。真正起作用的是 HTML 结构本身：把要固定在每页顶部的行放进 <thead>，浏览器打印时会自动重复渲染它。
为什么 <thead> 能实现“每页顶部最少行数”效果
根据 HTML 规范和主流浏览器（Chrome、Edge、Firefox）的打印行为：<thead> 中的内容会在每一页的表格顶部自动重复出现——前提是表格跨页。这个行为不依赖任何 CSS 属性，也不受 widows 或 orphans 影响。
-
<thead>必须是<table>的直接子元素，且只能有一个 - 必须包含至少一个
<tr>；该<tr>内可有任意数量的<th>或<td> - 如果想让多行固定在页首（比如标题行 + 单位行），全部放进同一个
<thead>即可，它们会一起重复 - 注意：Safari 在某些旧版本中对多行
<thead>打印支持不稳定，建议测试
常见错误：误用 widows 或试图用 CSS 强制重复
给 <tr> 设置 style="widows: 2;" 完全无效——widows 只作用于块级容器内的文本行，对表格行无意义。同样，position: sticky 在打印媒体中基本不生效。
- 错误写法：
<tr style="widows: 2;"><th>序号</th></tr>→ 无任何打印效果 - 错误思路：用
@media print { thead { display: table-header-group; } }→ 这是默认行为，无需显式设置（反而可能覆盖默认逻辑） - 真正需要加的仅是基础打印适配：
@media print { table { page-break-inside: auto; } tr { page-break-inside: avoid; page-break-after: auto; } }，帮助减少断行撕裂
实际可用的最小完整示例
<table>
<thead>
<tr><th>ID</th><th>姓名</th><th>部门</th></tr>
<tr><td colspan="3">数据更新时间：2024-06-15</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>张三</td><td>前端</td></tr>
<!-- 大量数据行，确保跨页 -->
</tbody>
</table>上面这个结构中，两行 <thead> 会在每一页顶部一起出现。只要内容足够多、触发分页，就能验证效果。别忘了在开发工具里用「打印预览」（Ctrl+P / Cmd+P）看真实结果——普通页面渲染看不出变化。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的一点：如果表格被包裹在 <div style="overflow: hidden"> 或设置了 transform，部分浏览器可能抑制 <thead> 的重复逻辑。打印前建议移除外层干扰样式。
