@media print 未生效主因是浏览器默认禁用背景图形、框架样式覆盖或 @page 规则缺失；需手动开启“背景图形”，将关键信息移至前景，对表格外层设 break-inside: avoid，用 pt 单位确保字体可读，并将打印样式置于全局非 scoped 样式中。
@media print 规则没生效，大概率不是写错了，而是被浏览器默认设置、加载时机或框架注入覆盖了。
为什么打印预览里样式正常，Ctrl+P 却不显示背景色和图片
Chrome 和 Edge 默认关闭「背景图形」选项，哪怕你写了 -webkit-print-color-adjust: exact 和 print-color-adjust: exact，这个开关一关，所有 background-color 和 background-image 都被无视。
- 用户必须手动在打印设置里打开「背景图形」（Print → More settings → Background graphics）
- 你不能用 JS 控制这个开关，它是浏览器级策略
- 所以更稳妥的做法是：把关键信息从背景移到前景，比如用
border或color表达状态，而不是依赖浅色背景块 - 如果非要用背景色，得加双重保障：
background: #fff !important; -webkit-print-color-adjust: exact !important;
table 被截断在两页中间，page-break-inside: avoid 不起作用
部分浏览器（尤其是旧版 Safari 和某些 Electron 内核）对 屏幕用的 CSS-in-JS 库（如 styled-components、emotion）或框架组件（如 Element Plus 的 最易被忽略的一点：@page 规则必须写在 page-break-inside: avoid 在 上的支持极差，真正起效的是对
或包裹容器设规则。
...
.print-table { break-inside: avoid; }
加
display: table-header-group，这是打印引擎识别表头重复的唯一可靠方式
上直接设
width: 100% + max-width 混用，打印时宽度计算容易溢出导致强制分页
字体变细、文字模糊，或字号在 A4 上小得看不清
rem、em 或 px 在打印上下文里会因 DPI 解析异常而缩放失真，pt 才是物理尺寸锚点。
font-size: 12pt（≈16px 屏幕显示），小于 10pt 在激光打印后基本不可读font-weight: lighter 或透明度 opacity，打印引擎常将其渲染为灰色虚影"SimSun", "Noto Sans CJK SC", serif，避免无衬线字体在小字号下笔画粘连currentColor —— 打印时颜色继承链可能中断，所有文本色显式写成 color: #000 !important
Vue/React 项目里 @media print 样式被动态样式覆盖
screen。
块里，而非 ，否则选择器会被加属性前缀，@media print 规则匹配不到media="print" 到 css 函数，或改用 引入纯 CSS 文件 里是否真有 @media print 规则；用 DevTools → Computed → 切换媒体为 print 查看实际生效值@media print 重置（如 Bootstrap），它可能清掉你的自定义样式@media print 外层，且不能嵌套；它不接受选择器，只作用于整页物理输出。很多团队花半天调 break-inside，却忘了加 @page { size: A4; margin: 15mm; }，结果所有努力都在错误的纸张尺寸上运行。
