给 tr 加 break-inside: avoid 无效，因规范不支持；应改用 table 或 tbody 的 break-inside: avoid-page（需配合 @media print），并确保 thead 正确设置及避免 flex/grid 包裹。
给 tr 加 break-inside: avoid 是无效的
浏览器根本不把 tr 当作可分页的块级盒，它属于表格内部渲染模型的一部分，break-inside 对它完全不生效——这不是你漏写了单位或拼错了属性，是规范层面就不支持。Chrome、Firefox、Safari 都无视加在 tr 上的该声明，即使套了 @media print 也一样静默失败。
真正有效的做法：用 break-inside: avoid-page 作用于 table 或 tbody
W3C Paged Media Level 3 明确推荐使用 break-inside: avoid-page（不是模糊的 avoid），且必须包裹在 @media print 中：
- 小表格（行数 ≤ 20）：直接给
table加break-inside: avoid-page，强制整表不跨页 - 长表格：改用
tbody作为控制单元，tbody { break-inside: avoid-page; }比单个tr更可靠 - 必须配合
thead { display: table-header-group; }，否则跨页时表头消失 - 避免把
table套在display: flex或grid容器里——打印时这些布局会退化，导致分页规则被忽略
break-inside: avoid-page 的生效前提很具体
这个属性只对块级容器起作用，且依赖上下文：
- ✅ 有效目标：
table、div、section、figure - ❌ 无效目标：
tr、td、img（除非先设display: block）、span - 父容器不能是
position: absolute或float，否则脱离文档流，分页控制失效 - 如果表格用了
overflow: hidden且内容溢出，可能意外破坏 BFC，使break-inside失效
Chrome 和 Safari 下更稳的写法
单靠 break-inside: avoid-page 在密集表格中仍可能被绕过，尤其当行高接近页面剩余空间时：
- 组合使用：
break-inside: avoid-page; break-after: auto;控制tbody分段节奏 - Safari ≤15.6 必须补前缀：
-webkit-break-inside: avoid-page; - 不要加
!important——这不是优先级问题，是引擎压根不处理 - 导出 PDF（如通过 Chrome “另存为 PDF”）时，
page-break-inside: avoid仍有有限支持，可并行保留作为降级
最常被忽略的一点：break-inside: avoid-page 只保证“不切”，不保证“能放”。如果一页只剩 12px 高度，浏览器宁可留白也不会压缩表格——得靠调整字体大小、padding 或列宽来腾出空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
