最安全的隐藏表格列方法是使用 <colgroup> + <col> 配合 display: none，或为整列单元格统一添加 class 并隐藏；需同步操作 <col>、<th> 和 <td> 以避免错位，导出时须在数据层过滤而非仅依赖 CSS。
用 display: none 隐藏表格列最直接，但要注意副作用
对 <td> 或 <th> 单独设 display: none 看似可行，实际会导致该单元格彻底脱离文档流，破坏表格结构——同一行其他单元格会自动拉伸填补空缺，列对齐完全错乱。真正安全的做法是针对整列控制，而不是单个单元格。
推荐方案：给目标列的所有 <td> 和 <th> 添加统一 class（如 col-hidden），再用 CSS 隐藏：
.col-hidden {
display: none;
}
这样所有同列单元格同时隐藏，视觉上列“消失”，但表格的列数逻辑仍保持一致，不影响其他列宽度计算和响应式表现。
用 <colgroup> + <col> 控制列样式更规范
<colgroup> 是语义化控制表格列的唯一标准方式，它允许你为某一列统一设置样式，包括隐藏。配合 display: none 可以精准作用于整列，且不干扰单元格内容流。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<table>
<colgroup>
<col>
<col class="hidden-col">
<col>
</colgroup>
<thead><tr><th>姓名</th><th>邮箱</th><th>状态</th></tr></thead>
<tbody><tr><td>张三</td><td>zhang@example.com</td><td>活跃</td></tr></tbody>
</table>
CSS：
.hidden-col {
display: none;
}
注意：<col> 不支持伪类、子元素或背景图，但 display、width、background 等基础属性有效。这是目前最干净、可维护性最强的隐藏列方式。
JavaScript 动态隐藏列要同步操作 <col> 和单元格
如果需要点击按钮切换列显隐，仅靠 JS 遍历 <td> 并加 display: none 很容易漏掉 <th> 或 <col>，导致表头/数据行不对齐。
稳妥做法是：用 data-col-index 标记列序号，JS 同时处理三处：
- 对应
<col>元素的className - 所有
<th>中cellIndex === n的单元格 - 所有
<td>中cellIndex === n的单元格
避免只改 <tbody> 里的 <td>，否则表头还在，列宽错位立刻出现。
隐藏列后导出 Excel 或打印可能失效
浏览器打印预览或前端导出（如 SheetJS）通常不识别 display: none 对 <col> 的影响，隐藏列仍可能出现在 PDF 或 XLSX 中。若需导出时也排除该列，必须在生成导出数据前，从原始数据数组中过滤掉对应字段，而不是依赖 CSS 隐藏。
换句话说：CSS 隐藏只管页面展示；导出、API 提交、无障碍读取等场景，都得在数据层做真实剔除。这点很容易被忽略，直到用户反馈“明明看不到了，怎么导出还有？”
