page-break-inside: avoid 对 table 无效，因规范将其列为原子渲染单元；可靠方案是拆分为多个带 thead 的独立 table 并用 page-break-before 控制分页，同时确保 thead 结构完整且不被 CSS 隐藏。
page-break-inside: avoid 在表格中根本不起作用？
这是最常遇到的问题：page-break-inside: avoid 对 <table> 元素本身基本无效 —— 浏览器（尤其 Chrome 和 Edge）在打印时会忽略它，表格行仍可能被截断在页尾。原因在于 CSS 打印规范中明确指出：page-break-inside 对 table、table-row 等“原子渲染单元”不强制生效，且各浏览器实现差异大。
-
<table>是一个整体块级容器，但打印分页引擎不把它当作可“保护”的单个块 - 即使给
<table>设置page-break-inside: avoid，浏览器仍可能在任意<tr>之间断页 - Firefox 相对尊重该声明，Chrome/Edge 几乎完全无视
真正能起效的替代方案：用 thead + page-break-after 控制分页点
核心思路是放弃“阻止分页”，转为“主动指定分页位置”，利用表头重复和人工分段来保障每页表格内容可读。
- 给每个
<thead>添加page-break-after: always（仅用于分段标记，实际不生效），真正起作用的是： - 在需要断页的位置插入一个空的
<tr>，并设置style="page-break-before: always;" - 更可靠的做法：将长表格拆成多个独立
<table>，每个<table>包含自己的<thead>，并在其前加page-break-before: always
<table>
<thead><tr><th>姓名</th><th>部门</th></tr></thead>
<tbody>
<tr><td>张三</td><td>前端</td></tr>
<tr><td>李四</td><td>后端</td></tr>
</tbody>
</table>
<p><div style="page-break-before: always;"></div></p><p><table>
<thead><tr><th>姓名</th><th>部门</th></tr></thead>
<tbody>
<tr><td>王五</td><td>测试</td></tr>
</tbody>
</table></p>thead 在打印中自动重复，但必须满足三个硬性条件
<thead> 打印时能否每页顶部重现，不取决于 CSS，而取决于 HTML 结构和浏览器解析规则：
立即学习“前端免费学习笔记（深入）”；
表格必须有显式的
<thead>标签（不能只靠 CSS 模拟表头）<thead>必须直接位于<table>内部，且在<tbody>之前表格不能嵌套在 flex/grid 容器中（否则打印引擎可能丢弃
<thead>语义）Chrome 90+ 要求
<thead>至少包含一个<tr>，空<thead>会被忽略如果用了
display: contents或visibility: collapse在<thead>上，重复功能失效Firefox 对
<thead>重复更宽容，Chrome 则严格依赖 DOM 结构完整性
打印前用 JavaScript 动态分表比纯 CSS 更可控
当表格行数不确定或需适配不同纸张尺寸时，CSS 分页极易失控。此时应预计算每页能容纳多少行，再用 JS 拆分：
- 获取打印样式下的行高（考虑 padding/border）和页面可用高度（
window.print()前无法精确获取，可用@media print { body { font-size: 12pt; } }预设基准） - 遍历
<tr>，累加 offsetHeight，超过阈值（如 750px）则插入分隔标记或新建<table> - 为避免跨页截断单元格内容，建议给
<td>加white-space: nowrap或overflow: hidden
const rows = Array.from(table.querySelectorAll('tbody tr'));
let currentTable = table;
let heightSoFar = 0;
const PAGE_HEIGHT = 750; // px，根据实际打印设置调整
<p>rows.forEach(row => {
heightSoFar += row.offsetHeight;
if (heightSoFar > PAGE_HEIGHT) {
const newTable = table.cloneNode(false);
newTable.appendChild(table.querySelector('thead').cloneNode(true));
newTable.appendChild(document.createElement('tbody'));
currentTable = newTable;
table.parentNode.insertBefore(newTable, table.nextSibling);
heightSoFar = row.offsetHeight;
}
currentTable.querySelector('tbody').appendChild(row);
});</p>表格打印的完整性从来不是靠一个 CSS 属性就能兜底的事。真正稳定的方案，永远建立在结构可控（显式 <thead>）、分页主动（JS 拆表或人工 page-break-before）、以及对浏览器打印行为差异的持续验证之上。
