给加page-break-inside: avoid无效，因浏览器将表格视为不可分割的原子块，且不支持该属性；需通过thead/tbody的display声明实现页眉复用，并在必要时手动拆分表格。
为什么给 <table> 加 <code>page-break-inside: avoid 没用
这不是你写错了，而是浏览器把 <table> 当作一个不可分割的“原子块”——只要它总高度超过一页，<code>page-break-inside: avoid 就退化为“整表挪到下一页”，而不是“在中间断开”。更关键的是：<tr> 和 <code><td> 上设这个属性完全无效，CSS 规范明确不支持。<p>常见现象：表格卡在第一页底部，第二页只剩半行数据，且表头消失。</p>
<ul><li><code><table> 层级加 <code>page-break-inside: avoid 仅对小表格（能塞进单页）有效
<thead> 和 <code><tbody> 行为上，而非 <code><tr>
<li>Chrome 115+ 对现代 <code>break-inside: avoid 支持仍不稳定，建议保留 page-break-inside: avoid 作为兜底怎么让表头每页都出现
只写 <thead> 标签没用。浏览器不会自动复制它到每页顶部，必须显式声明它的“页眉角色”。<p>在 <code>@media print 块里加这两行：
立即学习“前端免费学习笔记（深入）”；
thead { display: table-header-group; }
tbody { display: table-row-group; }缺一不可：tbody 的声明是为了兼容旧版 Edge；如果用了 flex 或 grid 包裹表格，先确保父容器没创建新层叠上下文（比如 overflow: hidden），否则这些 display 值会被忽略。
长表格必须拆吗？什么时候该拆
当表格总行数远超单页容量（比如一页最多 30 行，表格有 200 行），且你无法接受“整表下移”导致大片空白时，拆表是唯一可控方案。
- 每个子表必须带完整
<thead>，否则打印后可能找不到字段名<li>子表之间插 <code><div style="page-break-before: always;"></div>，这个<div> 必须在 <code>@media print范围内生效 - 别用
<hr>或带margin的元素代替——它们可能被打印引擎忽略或挤出边界 - JavaScript 动态拆分时，确保所有子表渲染完成后再调用
window.print()，否则可能漏内容 -
@page { margin: 1cm; }和内容区域的padding/margin冲突：边距变小后，原本刚好一页的内容突然溢出，触发意外分页 - 忘了禁用背景：
* { background: transparent !important; }，否则某些打印机把灰色背景印成大片黑块，遮盖文字 - 用 CSS-in-JS（如 Styled Components）时，
@media print规则没注入到，而是被动态挂载或 scoped 掉
调试打印分页最容易忽略的三件事
打印预览看着正常，打出来却错乱？大概率栽在这三点上：
真正起作用的永远是打印预览里的效果，不是开发者工具里看到的样式计算结果——Ctrl+P 预览完再确认，别跳过这步。
