直接写 td:nth-child(2) 隐藏列会出问题，因其依赖固定索引，后端加列或前端改模板顺序即导致目标错位；应改用 data-column 语义化标记整列单元格并配合 .hidden-column 类控制显隐。
为什么直接写 td:nth-child(2) 隐藏列会出问题
后端加一列、前端改个模板顺序，nth-child(2) 就指向了完全不同的字段。比如原本想隐藏“邮箱”，结果变成隐藏“部门”——这不是 bug，是设计缺陷。索引依赖结构，而真实项目里结构永远在变。
- 表格列数动态增减时，
nth-child选择器必然失效 -
col或colgroup上设display: none无效，浏览器不渲染它，也不继承样式 - 只操作
tbody td不碰thead th，浏览器会自动补空列，表头悬空、数据错行、边框断裂
data-column 属性必须同时出现在 th 和 td 上
语义化标记不是可选项，是强制前提。同一列的所有单元格（包括 thead、tbody，如有 tfoot 也得包含）必须带相同 data-column 值，且全小写+短横线，比如 last-login-time。
- Vue/React 中需写成
['data-column']形式，否则属性被过滤 - Shadow DOM 下要确保样式穿透，例如用
:host ::slotted([data-column="email"]) { display: none; } - 合并单元格（
colspan）存在时，隐藏某列可能导致colspan指向错误位置，需人工校验
用 .hidden-column 类切换比直接改 style.display 更安全
el.style.display = 'none' 会覆盖原生 display: table-cell，恢复时若漏写或写错（比如写成 'block'），表格立刻塌缩变形。CSS 类把样式逻辑完全交给样式表，JS 只管开关状态。
- CSS 只需一句：
.hidden-column { display: none; } - 切换用
element.classList.toggle('hidden-column')，不要手写style.display = '' - 别用
visibility: hidden：它保留占位，列宽残留，相邻单元格 padding/spacing 异常
JavaScript 批量操作必须一次命中整列所有单元格
调用 document.querySelectorAll('[data-column="email"]') 是唯一能精准捕获整列的方式，它天然包含 th、td，甚至 tfoot 里的对应单元格。
- 动态插入新行时，新
td必须带上相同的data-column和初始类状态 - 不要分两次查
th和td，避免遗漏或顺序错乱 - 媒体查询中可覆盖该类，比如移动端默认隐藏某些列：
@media (max-width: 768px) { .hidden-column { display: table-cell; } }
tfoot 的存在和 colspan 对隐藏逻辑的干扰——它们不常出现，但一旦出现，就会让整套隐藏机制静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
