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