必须用 data-column 语义化标记列并配合 .hidden-column 类控制显隐，而非索引操作：因索引易受字段顺序、空列、条件渲染等影响而失效，且需同步处理 thead/tbody/tfoot 中所有对应元素。
直接用 nth-child 或索引操作列，短期能跑通，长期必崩——后端字段顺序一变、前端加个空列、模板引擎插个条件渲染，整列控制就失效。真正可靠的做法，是给列打语义化标签，再用类名驱动显隐。
为什么不能只靠 cells[iCol] 隐藏列
看似简单：遍历每行的 cells[iCol]，设 style.display = 'none'。但实际踩坑无数：
- 表头
<th>和数据行<td>列数不一致时（比如服务端动态删了某列），iCol索引直接越界报错 -
display: none会破坏表格渲染模型，浏览器可能自动补空单元格或压缩宽度，导致对齐错乱 - 没有同步处理
<thead>和<tbody>，表头悬空、列宽塌陷是常态 - 无法响应后续 DOM 变动（如 Vue/React 动态增删行），脚本不会自动重绑定
必须用 data-column 标记列身份
这是所有稳定方案的前提。不是可选项，是强制项：
- 给每个
<th>和对应所有<td>加相同data-column="status"属性，值全小写+短横线，如last-login-time - 避免用空格、大写或点号，否则
document.querySelectorAll('[data-column="user.name"]')会失败 - 若用 Vue/React 渲染，确认
v-bind:或data-column被正确透传，别被框架过滤掉 - 不要依赖
<col>或<colgroup>控制显隐——它们不参与 CSS 渲染，display对其无效
用 classList.toggle() 切换 .hidden-column 类
比直接改 style.display 更安全、更解耦：
立即学习“前端免费学习笔记（深入）”；
- CSS 中只写一句：
.hidden-column { display: none; }，不干扰原有display类型（如table-cell） - 避免用
visibility: hidden——它保留布局空间，列宽残留，横向滚动条异常，对齐全乱 - JS 只负责开关类名：
document.querySelectorAll('[data-column="email"]').forEach(el => el.classList.toggle('hidden-column')) - 如果用了 Shadow DOM 或 scoped CSS，确认
.hidden-column能穿透作用域生效，必要时加:host ::ng-deep或全局样式
隐藏整列时，<thead> 和 <tbody> 必须同步处理
这是最容易被忽略的硬性规则：
- 只隐藏
<tbody>里的<td>，却不碰<thead>的<th>，浏览器会强制重排——有的补空白列，有的压缩宽度，结果不可预测 - 操作前统一查：
const colEls = document.querySelectorAll('[data-column="phone"]')，它天然包含<th>和所有<td> - 如果表格有
<tfoot>，也得一并纳入查询范围，否则页脚列错位 - 不要在内联样式里写
display: table-cell来“恢复”——不同浏览器对表格元素默认display值解析不一致
真正麻烦的从来不是写几行 JS，而是让语义标记、CSS 类、DOM 查询三者严丝合缝。漏掉任何一个环节，比如忘了给 <th> 加 data-column，或者 scoped CSS 拦截了类名，功能当场失效，且很难定位。
