@media print是打印适配的唯一生效入口，缺失则表格易被截断、表头消失、文字模糊；需用page-break-inside: avoid、display: table-header-group、color-adjust: exact等规则，并配合pt单位、安全字体及独立print.css引入。
@media print 是唯一生效入口，不加它就等于没做打印适配。直接 window.print() 打出来的表格大概率被劈成两半、表头消失、字体发虚——这不是浏览器 bug，是你没给打印通道配一套独立规则。
为什么表格在打印预览里总被硬生生截断
浏览器打印引擎对 table 的分页逻辑非常保守：默认不重复 thead，tr 可能被从中间切开，flex 或 grid 包裹的表格容器会退化成不可预测的流式结构。
- 给
table加page-break-inside: avoid;，防止整表跨页（Chrome/Firefox 支持良好） - 显式声明
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，别依赖浏览器自动识别 - 禁用
max-width、width用像素值，统一写成width: 100% !important; - 边框必须设
border-collapse: collapse;，否则双线叠加会导致错位或糊边
如何让打印出来的表格文字清晰不糊
中文表格最常崩在字体和单位上：Web Font 在打印时变方块，rem 或 % 字号在不同浏览器换算出的物理尺寸差一大截。
- 正文字体栈强制用系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
pt（如font-size: 10pt;）或mm，禁用em、rem、% -
<pre class="brush:php;toolbar:false;"></pre>和<code>块必须指定等宽字体：font-family: "Courier New", monospace; - 加
color-adjust: exact;和-webkit-print-color-adjust: exact;强制打印背景色（注意 Safari 兼容性有限）
哪些地方容易漏掉导致打印失效
很多问题不是没写样式，而是写了但根本没进渲染树，或者被其他规则覆盖。
-
@media print必须独立包裹，不能嵌套在其他媒体查询里；若内联书写，必须放在所有屏幕样式之后 - 推荐用
<link rel="stylesheet" media="print" href="print.css">单独引入，比内联更早介入渲染流程 - 页面含
<iframe></iframe>？父页的@media print不会穿透生效，需在 iframe 内单独定义 - 调试必须用浏览器打印预览（Chrome DevTools → Rendering → Emulate CSS media: print），别等真连打印机——90% 的问题预览就能暴露
真正容易被忽略的是：打印样式不是“写完就跑”，它得和你页面当前的 DOM 结构严丝合缝。比如动态加载的表格，如果 window.print() 调用时机早于数据渲染完成，打出来就是空表——这点没法靠 CSS 补救，得靠 JS 控制时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
