为何表格列设置visibility: collapse未按W3C文档预期生效？

你提到的W3C规范描述是准确的：

collapse值会使整行或整列从显示中移除，原本由该行或列占用的空间将可供其他内容使用。

但这里有个容易忽略的细节：这个“移除行/列并释放空间”的行为，只针对特定的表格元素生效，咱们一步步拆解你的问题：

1. 为什么给<td>设置visibility: collapse无效？ #

当你给单元格（<td>/<th>）设置visibility: collapse时，它的效果和visibility: hidden完全一样——只是隐藏单元格内的内容，但单元格本身的占位空间会被完整保留。表格的整体宽度、高度都不会变化，所以下方的段落自然不会上移。

这就是你尝试table tr td { visibility: collapse; }或table tr td:first-child { visibility: collapse; }时，看不到预期效果的核心原因。

2. 给<col>/<colgroup>设置collapse为什么也没生效？ #

这是浏览器表格布局机制的限制：默认情况下，表格使用table-layout: auto（自动布局），这种模式下，列宽是由单元格里的内容自动计算出来的。此时给<col>或<colgroup>设置visibility: collapse，浏览器无法准确计算移除列后的布局（因为列宽依赖动态内容），所以不会触发“移除列并释放空间”的行为。

想要让<col>/<colgroup>的visibility: collapse生效，只需要给表格加上固定布局规则：

table {
  table-layout: fixed;
  width: 100%; /* 给固定布局提供宽度基准 */
}
table colgroup col.red {
  visibility: collapse;
}

加上这段代码后，浏览器会按照<col>的定义来计算列宽，collapse就能正确移除目标列，下方的段落也会自动上移到表头下方，和你的预期效果一致。

3. 为什么给<tr>设置collapse有效？ #

<tr>是表格的行元素，不管表格使用自动布局还是固定布局，给行设置visibility: collapse都会直接移除整行的空间，表格整体高度收缩，下方段落自然会上移，这完全符合W3C规范的描述。

补充：和display: none的区别 #

你提到用display: none能实现效果，这两者的核心差异在于：

• visibility: collapse在移除行/列时，会保留表格的整体布局结构（比如合并单元格的关联关系），适合需要维持表格结构但隐藏部分行/列的场景。
• display: none会直接移除目标元素，可能破坏表格的布局关联，但在自动布局下不需要额外配置就能生效。

内容的提问来源于stack exchange，提问作者ZerosAndOnes