visibility:collapse 在 <col> 或 <colgroup> 上不会隐藏整列内容，而是让该列塌缩——浏览器重分配剩余列宽，但单元格内容可能残留（Firefox 更明显），Chrome 表现接近隐藏，行为不统一，且对 <td>/<th> 无效（等同 visible）。
visibility:collapse 对表格列的实际效果是什么
直接说结论：visibility:collapse 在 <col> 或 <colgroup> 上**不会隐藏整列内容**，而是让该列“塌缩”——浏览器会重新分配剩余列的宽度，但单元格内容仍可能残留（尤其在 Firefox 中），Chrome 表现更接近“隐藏”，但行为不统一，且不适用于 <td>/<th> 元素。
为什么不能对 <td> 或 <th> 用 visibility:collapse
visibility:collapse 是专为表格结构设计的值，只对以下元素有效：<col>、<colgroup>、<tbody>、<thead>、<tfoot>。对 <td> 或 <th> 设置它，等价于 visibility:visible（即无效）。
- 浏览器会忽略该声明，控制台通常不报错，但样式不起作用
- 想隐藏单个单元格，必须用
display:none或visibility:hidden（后者保留占位） - 用
visibility:collapse+<td>是常见误用，结果是列看起来“没变”
正确隐藏特定列的两种可靠方式
真正能稳定隐藏整列的方法只有两个，且需配合结构使用：
-
方法一（推荐）：给
<col>设display:none<colgroup> <col> <col style="display:none"> <!-- 这一列完全不渲染 --> <col> </colgroup>
注意：display:none在<col>上是标准支持的，所有现代浏览器都按预期隐藏列且不占空间 -
方法二：用 CSS 类 + :nth-child() 隐藏对应单元格
/* 隐藏第2列的所有单元格 */ td:nth-child(2), th:nth-child(2) { display: none; }缺点：需要确保每行单元格数量一致；<col>宽度控制失效；表头/数据列错位风险高
容易被忽略的兼容性与副作用
visibility:collapse 的最大陷阱在于“看似生效，实则埋雷”：
立即学习“前端免费学习笔记（深入）”；
- Firefox 会保留被 collapse 列的边框和背景（如果设置了），导致视觉残留
- 当表格启用了
table-layout:fixed，visibility:collapse可能破坏列宽计算逻辑 - 用 JavaScript 动态切换时，
getComputedStyle(el).visibility返回collapse，但实际布局变化不可预测 - 屏幕阅读器对
visibility:collapse的处理不一致，可访问性风险比display:none更高
真要隐藏列，别绕弯——display:none on <col> 是唯一干净、可预测、无障碍友好的方案。
