HTML表格打印被截断、表头消失、跨页错位，主因是默认分页逻辑未覆盖：table不响应page-break-inside: avoid，需设thead{display:table-header-group}并拆分为多表+page-break-before分页。
直接用 <table> 渲染报表，不加样式干预就调 <code>window.print()，90% 会遇到表格被截断、表头消失、跨页错位——这不是浏览器 bug，是默认分页逻辑没被覆盖。
为什么打印时表格总被砍在中间？
浏览器按 A4 纸高（约 1123px）做分页，<table> 默认允许 <code>page-break-inside: auto，意味着它会把某一行硬生生劈成两半。尤其当行高不均、有合并单元格或嵌套元素时，分页引擎更难判断“哪里该断”。
- 禁用自动断行：
table { page-break-inside: avoid; }是最基础的兜底，但只对整张表生效，不解决内部行断裂 - 真正起效的是给
<tr> 加 <code>page-break-inside: avoid，但注意：IE/Edge 旧版不支持，必须搭配page-break-after: avoid回退 <thead> 必须显式设置 <code>display: table-header-group，否则 Chrome/Firefox 在分页后不会重复渲染表头如何让每页都带表头？
仅靠
<thead> 标签语义不够。打印上下文里，浏览器不会自动把 <code><thead> 复制到每一页顶部，除非你明确告诉它“这是可复用的头部组”。 <ul> <li>必须写：<code>thead { display: table-header-group; }，这是 CSS 打印规范强制要求的行为- 如果用了
position: sticky或自定义浮动表头，打印时一律失效——打印模式下不支持 sticky 定位 - 表头内若有
<input>、<button></button>等交互控件，建议在@media print中设为display: none，否则可能干扰布局或留白异常
dataset 替代 onclick 拼接，对打印有什么影响？
和打印本身无关，但它决定你能不能安全地动态生成表格数据——而打印内容是否完整，往往取决于 JS 渲染阶段有没有 XSS 或解析失败。
立即学习“前端免费学习笔记（深入）”；
- 别再写
<tr onclick="renderDetail('id-123')">：引号嵌套易出错，JSON 字符串拼接一旦漏转义，<code>innerHTML就可能注入脚本，导致打印前页面已崩溃 - 改用
<tr data-id="123" data-handler="show-detail">，JS 端统一用 <code>el.dataset.id取值，无解析风险 - 若表格数据来自 API，返回 JSON 后用
document.createElement+textContent插入单元格，比字符串拼接<td>+name+</td>更可靠——少一个就整行失效，调试时很难定位哪条数据坏了结构
真正卡住人的不是分页属性本身，而是混合了动态渲染、CSS 优先级、浏览器打印缓存这三者的叠加效应。每次改完 @media print 规则，务必清空打印预览缓存（Chrome 中按 Ctrl+R 强刷），否则看到的可能是上一次的旧布局。
