结论：page-break-inside: avoid 对 table 失效因浏览器视其为原子块，必须组合设置 thead{display:table-header-group}、tbody{display:table-row-group}，必要时拆表并插入 page-break-before 占位符。
直接说结论：表格打印跨页，别指望单靠 page-break-inside: avoid 一招搞定；必须组合设置 thead、tbody 行为，并在必要时拆表 + 插空 <div style="page-break-before: always"></div>。
为什么 page-break-inside: avoid 对 <table> 经常失效
浏览器把整个 <table> 当作一个“原子块”处理分页，只要它高度超过一页，page-break-inside: avoid 就会退化为“整表下移”，而不是“优雅断开”。更糟的是：<tr> 和 <td> 上设这个属性完全无效（CSS 规范明确不支持）。
- 常见现象：表格卡在第一页底部，第二页只剩半行数据，表头消失
- 真正起作用的层级是
<table>（整体控制）、<thead>（复现逻辑）、<tbody>（分段锚点） - Chrome 115+ 对现代
break-inside的支持仍不稳定，建议保留page-break-inside: avoid作为兜底
让表头每页都出现：必须加 display: table-header-group
只写 <thead> 标签没用，浏览器不会自动把它复制到每页顶部。必须显式告诉它：“这个头要当页眉用”。
- 在
@media print中写：thead { display: table-header-group; } - 别漏掉
tbody { display: table-row-group; }，否则部分旧版 Edge 可能忽略thead行为 - 如果用了
flex或grid包裹表格，先确保父容器没干扰文档流——display: table系列属性只在标准文档流中可靠
长表格必须拆成多个独立 <table>？什么情况下该拆
当表格总行数远超单页容量（比如一页最多 30 行，表格有 200 行），且你无法接受“整表下移”导致大片空白时，拆表是唯一可控方案。
立即学习“前端免费学习笔记（深入）”；
- 每个子表都带完整
<thead>，避免用户打印后找不到字段名 - 子表之间插一个干净的分页占位符：
<div style="page-break-before: always;"></div> - 这个
<div>必须放在@media print生效范围内，开发时用 Ctrl+P 预览才看得见效果 - 别用
<hr>或带 margin 的元素代替——它们可能被打印引擎忽略或挤出边界
调试时最容易被忽略的三件事
打印预览里一切正常，打出来却错乱？大概率栽在这三点上。
-
@page { margin: 1cm; }和内容区域的 padding/margin 冲突：边距变小后，原本刚好一页的内容突然溢出，触发意外分页 - 忘了禁用背景：
* { background: transparent !important; }，否则某些打印机把灰色背景印成大片黑块，遮盖文字 - 用 CSS-in-JS（如 Styled Components）时，
@media print规则没注入到<head>，而是被动态挂载或 scoped 掉了——检查打印预览里的 Elements 面板，确认样式真实存在
