给table加break-inside: avoid-page可防小表格跨页，但长表格会留白；thead必须设display: table-header-group且为table直接子元素；tbody分段用break-after: avoid更可控；旧版浏览器需加-webkit前缀和page-break-inside兜底。
给 table 加 break-inside: avoid-page，不是 tr
直接给 tr 写 break-inside: avoid 是无效的——浏览器根本不把表格行当作可分页的块级盒。现代打印引擎（Chrome ≥ 80、Firefox ≥ 65、Safari ≥ 14.5）对 tr、td 这类表格内部元素完全忽略该声明。
真正起作用的是给整个 table 元素加 break-inside: avoid-page，且必须包裹在 @media print 中：
@media print {
table {
break-inside: avoid-page;
}
}- ✅ 小表格（行数少）：这样能强制整表不跨页
- ⚠️ 长表格（几十行）：如果整表高度 > 单页可用空间，浏览器会把它整个推到下一页，导致第一页大片留白
- ❌ 不要写
page-break-inside: avoid—— 它已被规范弃用，且对table也仅“尽力而为”，实际基本失效
thead 要设 display: table-header-group
否则表头只在第一页出现，后续页面没标题，数据就失去上下文。这不是样式问题，是打印分页机制要求的语义分组。
必须配合 break-inside: avoid-page 使用：
立即学习“前端免费学习笔记（深入）”；
@media print {
table {
break-inside: avoid-page;
}
thead {
display: table-header-group;
}
}- ✅
thead必须是<table>的直接子元素，且不能被display: block或其他布局方式破坏结构 - ❌ 如果用了
position: sticky或外包了div，thead就不再被识别为表头组，display: table-header-group失效 - ⚠️ 边框记得加
border-collapse: collapse，否则每页都可能重复渲染表头边框
长表格没法整页放？改用 tbody 分段 + break-after: avoid
当表格太大，硬塞会导致严重留白或内容溢出时，得放弃“保整表”，转而控制分段节奏。
思路是：让每个 tbody 当作一个逻辑单元，用 break-after: avoid 控制它是否留在当前页末尾：
@media print {
tbody {
break-after: avoid;
}
/* 可选：给每个 tbody 加 top border，视觉上区分段落 */
tbody:first-child {
border-top: none;
}
}- ✅ 比单靠
break-inside更可控，尤其适合带分组标题的报表（如每月数据一个tbody） - ⚠️
break-after: avoid不保证一定不断开，它只是“尽量避免”；如果tbody高度 > 剩余页高，仍会整体移至下一页 - ❌ 别给
tr单独加break-inside或page-break-inside—— 测试过上百次，无一有效
Safari ≤ 15.6 和旧版 Chrome 需要兼容写法
这些版本对 break-inside 支持不稳定，尤其在多列或复杂嵌套中。不能只靠标准属性。
必须叠加前缀和降级声明：
@media print {
table {
break-inside: avoid-page;
-webkit-break-inside: avoid-page;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
}- ✅
-webkit-break-inside在 Safari ≤ 15.6 下是必需的，缺了就静默失效 - ⚠️
page-break-inside: avoid已废弃，但作为兜底仍有必要——部分旧版 Chrome/Firefox 对它还有微弱响应 - ❌ 不要加
!important：这不是优先级问题，是渲染引擎压根不解析该值
真正卡住的点不在 CSS 写法，而在你是否确认了表格容器没被 overflow: hidden、display: flex 或 position: absolute 包裹——只要父层破坏文档流，所有分页控制都会被跳过。
