表格打印时隐藏列仍占宽，根本原因是table-layout: auto下浏览器自动重算列宽；必须设table-layout: fixed，或用标签、data-column属性精准控制整列隐藏。
为什么只给 td 加 display: none 打印时列宽还在
表格在打印时仍保留隐藏列的宽度，不是 CSS 写错了，而是浏览器按 table-layout: auto 重新计算整行宽度——display: none 确实生效了，但父级 <table> 没被约束，它会“猜”各列该占多少空间，结果就是空白占位、对齐错乱。
<ul><li>必须给 <code><table> 显式设置 <code>table-layout: fixed，否则所有列隐藏操作都是视觉欺骗
<col> 标签比直接操作 th/td 更底层、更稳定，推荐优先用：@media print { col.hidden-print { display: none; } }
<col>，就得确保 th 和所有对应 td 同时加相同类（如 .hidden-column），漏一个就会触发浏览器自动修复，导致表头悬空
data-column 是唯一能扛住结构变更的列标识方式
用 td:nth-child(3) 隐藏第三列，上线后加一列操作按钮，原来第三列变成第四列，整个逻辑就废了。真实项目里，列顺序变动太常见，靠位置索引等于埋雷。
- 给每列单元格统一加
data-column="email"属性（<th> 和所有 <code><td> 都要写） <li>CSS 写成：<code>[data-column="email"] { display: none; }，选择器精准命中整列，不依赖 DOM 位置 - JS 动态控制也用
document.querySelectorAll('[data-column="email"]')，避免querySelectorAll('td:nth-child(3)')这类脆弱写法 - React/Vue 中注意属性写法：React 要写成
['data-column']，Vue 模板中直接data-column即可 - 确认
@media print规则没被其他样式覆盖——打开 Chrome 打印预览 → DevTools → Computed 面板 → 左上角切换为 “print”，看最终计算值是否为display: none - 绝对定位、
transform或<dialog></dialog>内的表格单元格，display: none可能因裁剪异常失效，改用visibility: hidden; position: absolute; left: -9999px;双保险 - 样式表引入方式错误：不能用
@import，也不能把@media print塞进主 CSS 文件末尾；必须新建独立print.css，并用<link rel="stylesheet" href="print.css" media="print"> - 边框必须显式声明且带
!important：th, td { border: 1px solid #000 !important; }，只设table { border-collapse: collapse }不够 - 背景色要三重加固：
color-adjust: exact;、-webkit-print-color-adjust: exact;、print-color-adjust: exact;，再加background-color: #fff !important; - 字体单位禁用
rem/%，改用pt（如font-size: 10pt）或px，确保跨设备尺寸可控 - 打印设置里必须手动勾选「背景图形」（Chrome）或设
print.print_background = true（Firefox about:config）
@media print 中 display: none 不生效的三个硬坑
写了规则却打出来还在，大概率不是语法问题，而是渲染层或样式作用域没兜住。
打印时背景色和边框消失的根本原因与对策
不是你的 CSS 没写，是浏览器默认禁用背景输出，且用户代理样式会重置 border 和 background-color。
thead 和 tbody 列数对齐这件事，一旦出错，整张表的视觉结构就垮了，而且不同浏览器修复策略还不一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
