visibility: collapse 在表格中“应”不占空间，但实际效果因浏览器而异：Firefox/Safari 对 <tr> <col> 支持良好，可真正释放空间；Chrome 对 <tr> 常退化为 hidden（仍占位），仅 <col>/<colgroup> 可靠；IE 完全不支持。
visibility: collapse 在表格中真的不占空间吗？
它“应该”不占空间，但实际效果取决于浏览器实现和表格结构。现代 Firefox 和 Safari 基本按规范处理：visibility: collapse 应用于 <tr>、<col>、<thead> 等表格元素时，会移除该行/列的渲染，且不参与布局计算——相邻行自动贴合，列宽重分配（前提是 table { border-collapse: collapse } 或使用自动表格布局）。
Chrome 的行为则更保守：
- 对
<tr>多数情况下表现接近visibility: hidden（仍占高度，只是透明） - 对
<col>或<colgroup>支持较好，能真正释放列宽 -
<tbody>或<tfoot>上的collapse在 Chrome 中可能被降级为hidden
所以别默认“写了就生效”。验证方式很简单：用开发者工具检查折叠后表格的实际 offsetHeight 和 getBoundingClientRect()，对比未折叠状态。
哪些表格元素支持 collapse 且效果可靠？
只在以下原生表格相关元素上使用 visibility: collapse 才有意义：
立即学习“前端免费学习笔记（深入）”；
-
<tr>（Firefox/Safari 可靠；Chrome 需配合table-layout: fixed） -
<col>和<colgroup>（三端兼容性最好，列宽立即重分配） -
<thead>、<tbody>、<tfoot>（Safari/Firefox 支持；Chrome 表现不稳定，建议避免）
绝对不要对 <div>、<span> 或 Flex/Grid 容器子项用 collapse——它会被当作 hidden 处理，还容易引发可访问性问题（屏幕阅读器仍会读取）。
为什么 collapse 有时像 hidden？常见失效原因
visibility: collapse 失效往往不是写错了，而是被上下文覆盖或限制：
- 表格设置了
display: table-cell或inline-table：这些非标准表格 display 值会让collapse退化为hidden - 父级
<table>缺少明确宽度或使用了auto表格布局：浏览器无法安全重算列宽，干脆保留占位 - 同一行内有
rowspan或colspan单元格：折叠<tr>可能导致单元格跨行断裂，浏览器选择保守渲染（即保持占位） - 使用了 CSS 自定义属性间接设置，例如
style="--vis: collapse"; visibility: var(--vis)：部分旧版浏览器不支持变量解析collapse值
最稳妥的兜底方案：对 <tr> 用 collapse 后，加一句 tr[hidden] { display: none } 并在 JS 中同步 toggle hidden 属性，确保降级可用。
替代方案：什么时候该直接用 display: none？
当你要隐藏的是：
- 非表格元素（
<div>、<section>等） - 表格中带复杂嵌套或
position: absolute子元素的<tr> - 需要确保屏幕阅读器跳过、键盘焦点不可达的场景（
visibility: hidden不阻止焦点，collapse更不保证） - 要在 Vue/React 中响应式控制显隐，且不希望 DOM 节点保留在内存中（
visibility不影响组件生命周期）
注意：display: none 会触发重排，而 visibility: collapse 理论上只触发重绘——但现实中，Chrome 往往也重排，所以性能优势并不稳定。真正需要极致性能时，得结合 contain: layout paint 或虚拟滚动。
