必须同步隐藏同列的th和td，否则浏览器会因thead与tbody列数不匹配而自动修复，导致表头悬空、数据错行、边框断裂且跨浏览器表现不一；正确做法是用data-column属性配合.hidden-column类统一控制所有对应单元格的display:none。
为什么只隐藏 td 不碰 th 会导致表格错位
HTML 表格的渲染模型要求 thead 和 tbody 的列数严格对齐。如果只隐藏某列的 td，却不处理对应 th，浏览器会尝试“修复”不匹配——可能自动补空单元格、压缩宽度，或让后续列向左塌陷。结果就是表头悬空、数据错行、边框断裂，且不同浏览器表现不一致。
必须同步操作：同一列标识下的所有 th 和 td 都要加相同控制类（如 .hidden-column），不能漏掉任何一行。
- 检查是否遗漏了
tfoot中的td或th（如有） - 动态插入新行时，需确保新
td也带相同的data-column属性和初始类状态 - 使用
document.querySelectorAll('[data-column="email"]')比querySelectorAll('td:nth-child(3)')更安全，避免因结构变动失效
display: none 对表格单元格的真实影响
直接给 td 或 th 设置 style.display = 'none' 看似有效，但会覆盖其原生 display: table-cell 值。恢复时若写成 style.display = 'block' 或漏写，就彻底破坏表格语义，导致整行塌缩或换行。
正确做法是用 CSS 类切换，把样式逻辑完全交给 CSS：
.hidden-column { display: none; }
这样无论元素原本是 table-cell、table-header-group 还是其他，都只受单一规则控制，且可被媒体查询或主题覆盖。
- 不要用
visibility: hidden替代——它保留空间，列宽残留，相邻列 padding/spacing 会异常 - 避免在 JS 中硬编码
display: table-cell来恢复，各浏览器对表格元素默认 display 解析有细微差异 - 若用了 Shadow DOM，确认
.hidden-column规则能穿透作用域（例如用:host ::slotted(.hidden-column)或全局样式）
用 data-column 而不是 nth-child 的真实原因
靠 td:nth-child(2) 隐藏第二列，上线第一天可能正常；后端加一列“操作”在最右，所有基于索引的隐藏逻辑立刻全崩——nth-child(2) 变成“年龄”，而你本意是隐藏“邮箱”。
语义化标记才是工程级解法：
<th data-column="email">邮箱</th><br><td data-column="email">user@example.com</td>
这样 JavaScript 操作的是业务含义，不是位置坐标。
-
data-column值统一用小写+短横线，如last-login-time，避免空格或大写导致选择器失败 - 模板引擎（Vue/React）中注意属性透传，比如 Vue 的
v-bind默认不传递自定义属性，需显式写v-bind="attrs" - 服务端渲染时若列动态生成，确保
data-column在 HTML 输出阶段就存在，而非 JS 后置注入
隐藏整列时最容易被忽略的兼容性点
有人试过 <colgroup><col style="visibility: collapse"></colgroup>，发现 Chrome 正常、Firefox 显示异常——因为 visibility: collapse 在表格中行为未完全标准化，尤其当列含 colspan 或嵌套 table 时，部分浏览器会忽略或误判。
真正跨浏览器稳定的路径只有一条：用 data-column + .hidden-column 类 + 同步操作所有对应单元格。
-
<col>标签本身不参与渲染，无法用display: none控制，且对th无影响 - 移动端 Safari 对
display: noneonth有极个别版本解析延迟，必须配合force reflow（如读取 offsetHeight）才能立即生效 - 如果表格启用了虚拟滚动，隐藏列后需重新计算列宽缓存，否则滚动时可能出现宽度跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
