应使用 data-column 属性统一标识列并配合 .hidden-column 类控制显隐，避免 nth-child 和内联 style.display；需同步操作 thead/tbody/tfoot 中对应列，避开 colspan 雷区，并确保 shadow dom 和框架兼容性。

直接用 nth-child 或内联 style.display 控制列显隐，短期能跑，长期必崩——列顺序一变、模板重渲染、跨框架传值，全失效。

用 data-column 给每列打身份标签

浏览器不认“列”这个概念，只认 <th> 和 <code><td> 元素。靠位置索引（比如 <code>th:nth-child(3)）隐藏第三列，等于把逻辑绑死在 DOM 渲染顺序上。

• 必须同时给 <thead> 里的 <code><th> 和所有 <code><tbody> 里的 <code><td> 加相同 <code>data-column="email"
• 值统一用小写+短横线，比如 last-login-time，避免空格或大写导致选择器失败
• 若用 Vue/React 渲染，确认框架没过滤 data- 属性（Vue 默认保留，React 需显式透传）

用 CSS 类切换，别碰 style.display

直接写 el.style.display = 'none' 看似快，但会覆盖原始 display: table-cell，恢复时无法自动还原；visibility: hidden 又占位，导致列宽残留、对齐错乱。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 定义一个纯样式类：.hidden-column { display: none; }
• JS 只负责开关：cell.classList.toggle('hidden-column')
• 如果用了 Shadow DOM 或 scoped CSS，得确保 .hidden-column 能穿透作用域生效

必须同步操作 <thead> 和 <code><tbody><p>只隐藏 <code><tbody> 里的 <code><td>，却不处理 <code><thead> 的 <code><th>，表格渲染模型会自动补空列或压缩宽度，结果不可预测——不是样式错，是 HTML 表格规范强制要求表头与数据行列数严格对齐。 <ul> <li>一次选中全部：<code>document.querySelectorAll('[data-column="status"]')

遍历切换：cells.forEach(cell => cell.classList.toggle('hidden-column'))

如果用了 <tfoot>，也得包含进去，否则 footer 单元格可能错位 <h3>合并单元格（<code>colspan）是隐藏列的雷区

当某行存在 colspan="2"，而你又隐藏了其中一列，浏览器会按剩余可见列重新计算 colspan 指向，极易导致内容错位或空白列突兀出现。

• 隐藏前先检查该列是否被任何 colspan 覆盖
• 真有合并需求，建议改用 JS 动态生成 colspan 值，或干脆避开在可隐藏列上设 colspan
• 这不是 bug，是表格渲染引擎的确定性行为——它永远优先保证结构合法，而非视觉一致

最麻烦的从来不是怎么写代码，而是列里混着 colspan、表格嵌在 Shadow DOM 里、还被 React 的 key 机制反复重排——这些地方一动，整套显隐逻辑就得重验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！