表格打印时隐藏列仍占宽，根本原因是table-layout: auto下浏览器自动重算列宽；必须设table-layout: fixed，或用<col>标签、data-column属性精准控制整列隐藏。
为什么只给 td 加 display: none 打印时列宽还在
表格在打印时仍保留隐藏列的宽度，不是 CSS 写错了，而是浏览器按 table-layout: auto 重新计算整行宽度——display: none 确实生效了，但父级 <table> 没被约束，它会“猜”各列该占多少空间，结果就是空白占位、对齐错乱。
- 必须给
<table>显式设置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>和所有<td>都要写） - CSS 写成：
[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 中 display: none 不生效的三个硬坑
写了规则却打出来还在，大概率不是语法问题，而是渲染层或样式作用域没兜住。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确认
@media print规则没被其他样式覆盖——打开 Chrome 打印预览 → DevTools → Computed 面板 → 左上角切换为 “print”，看最终计算值是否为display: none - 绝对定位、
transform或<dialog>内的表格单元格，display: none可能因裁剪异常失效，改用visibility: hidden; position: absolute; left: -9999px;双保险 - 样式表引入方式错误：不能用
@import，也不能把@media print塞进主 CSS 文件末尾；必须新建独立print.css，并用<link rel="stylesheet" href="print.css" media="print">
打印时背景色和边框消失的根本原因与对策
不是你的 CSS 没写，是浏览器默认禁用背景输出，且用户代理样式会重置 border 和 background-color。
立即学习“前端免费学习笔记（深入）”；
- 边框必须显式声明且带
!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）
thead 和 tbody 列数对齐这件事，一旦出错，整张表的视觉结构就垮了，而且不同浏览器修复策略还不一样。 
