html表格打印“完整显示”的核心是分页可控、表头可复现、边框不丢失；page-break-inside: avoid对无效，因其被规范视为原子渲染单元，chrome/edge基本忽略，须改用拆表+page-break-before+显式@media print声明thead和边框。
直接说结论：HTML 表格在打印时“完整显示”不是靠让整张表挤进一页，而是靠分页可控、表头可复现、边框不丢失—— 这不是你写错了，是规范和浏览器共同决定的： 放弃“阻止断页”，转为“指定断页位置”。核心是把长表格手动切分成多个独立 浏览器不会自动在每页顶部重现 这些点不处理，哪怕结构和样式都对，打印结果依然可能在某个浏览器里崩掉。 最麻烦的其实不是写代码，而是验证：必须在 Chrome、Edge、Firefox 和 Safari 的打印预览里逐个点开看——尤其是第二页有没有表头、边框连不连续、分页点是否准确。一旦漏掉一个条件，整页就白调了。page-break-inside: avoid 对 <table> 本身基本无效，必须换思路。
<h3>为什么 <code>page-break-inside: avoid 在表格里不起作用
<table> 被 CSS 打印引擎视为“原子渲染单元”，<code>page-break-inside 对它不强制生效。Chrome 和 Edge 几乎完全忽略该声明，Firefox 略微尊重但也不稳定。实际效果往往是：表格被硬生生截断在页尾，第二页只有几行数据，没有表头，用户根本看不懂。
<tr> 和 <code><thead> 同样受限制，不能靠给某一行加 <code>page-break-inside: avoid 来保全
display: block 或 position: relative，也无法改变其原子性overflow: visible 或 zoom: 1 等 hack 完全无效真正起效的分页控制：拆表 +
page-break-before
<table>，每个都带完整的 <code><thead>，再用 <code>page-break-before: always 控制分页点。
<table> 必须有显式的 <code><thead>（不能只靠 CSS 模拟），且必须直接子元素于 <code><table><li>在需要分页的位置插入一个空 <code><div style="page-break-before: always;"></div>，放在两个 <table> 之间
<li>不要用 <code><tr style="page-break-before: always;"> —— 多数浏览器不识别
<li>示例结构：</li>
<pre class="brush:php;toolbar:false;"></pre>
<table>
<thead><tr>
<th>姓名</th>
<th>部门</th>
</tr></thead>
<tbody><tr>
<td>张三</td>
<td>前端</td>
</tr></tbody>
</table>
<div style="page-break-before: always;"></div>
<table>
<thead><tr>
<th>姓名</th>
<th>部门</th>
</tr></thead>
<tbody><tr>
<td>李四</td>
<td>后端</td>
</tr></tbody>
</table>
<h3>表头重复和边框显示必须靠 <code>@media print 显式声明
<thead>，也不会保留你在屏幕样式里写的 <code>border。打印样式必须单独、强硬地覆盖。
@media print { thead { display: table-header-group; } }，否则第二页没表头border 必须分别给 table、th、td 声明，并加 !important，例如：th, td { border: 1px solid #000 !important; }
background-color 打印默认会被抹掉，要加 -webkit-print-color-adjust: exact !important;
rem 或百分比设 padding，统一用 px 或 pt（如 padding: 4px 6px !important;）容易被忽略的兼容性雷区
<thead> 至少包含一个 <code><tr>，空 <code><thead> 会被跳过
<li>如果表格被包在 <code>display: flex 或 display: grid 容器里，<thead> 重复功能大概率失效
<li>用了 <code>display: contents 或 visibility: collapse 在 <thead> 上，等于主动废掉表头语义
<li>移动端 Safari 对 <code>table-layout: fixed 更敏感，长文本列容易撑破页面，建议打印时临时设为 auto
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
