visibility: collapse 在表格中“应”不占空间，但实际效果因浏览器而异：firefox/safari 对 支持良好，可真正释放空间；chrome 对 常退化为 hidden（仍占位），仅 / 可靠；ie 完全不支持。

visibility: collapse 在表格中真的不占空间吗？

它“应该”不占空间，但实际效果取决于浏览器实现和表格结构。现代 Firefox 和 Safari 基本按规范处理：visibility: collapse 应用于 <tr>、<code><col>、<thead> 等表格元素时，会移除该行/列的渲染，且<strong>不参与布局计算</strong>——相邻行自动贴合，列宽重分配（前提是 <code>table { border-collapse: collapse } 或使用自动表格布局）。

Chrome 的行为则更保守：

• 对 <tr> 多数情况下表现接近 <code>visibility: hidden（仍占高度，只是透明）
• 对 <col> 或 <colgroup></colgroup> 支持较好，能真正释放列宽
• <tbody> 或 <code><tfoot> 上的 <code>collapse 在 Chrome 中可能被降级为 hidden

  所以别默认“写了就生效”。验证方式很简单：用开发者工具检查折叠后表格的实际 offsetHeight 和 getBoundingClientRect()，对比未折叠状态。

  哪些表格元素支持 collapse 且效果可靠？

  只在以下原生表格相关元素上使用 visibility: collapse 才有意义：

  

  html-deploy

  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

  下载
  • <tr>（Firefox/Safari 可靠；Chrome 需配合 <code>table-layout: fixed）
  • <col> 和 <colgroup></colgroup>（三端兼容性最好，列宽立即重分配）
  • <thead>、<code><tbody>、<code><tfoot>（Safari/Firefox 支持；Chrome 表现不稳定，建议避免）<p>绝对不要对 <code><div>、<code><span></span> 或 Flex/Grid 容器子项用 collapse——它会被当作 hidden 处理，还容易引发可访问性问题（屏幕阅读器仍会读取）。

    为什么 collapse 有时像 hidden？常见失效原因

    visibility: collapse 失效往往不是写错了，而是被上下文覆盖或限制：

    • 表格设置了 display: table-cell 或 inline-table：这些非标准表格 display 值会让 collapse 退化为 hidden
    • 父级 <table> 缺少明确宽度或使用了 <code>auto 表格布局：浏览器无法安全重算列宽，干脆保留占位
    • 同一行内有 rowspan 或 colspan 单元格：折叠 <tr> 可能导致单元格跨行断裂，浏览器选择保守渲染（即保持占位） <li>使用了 CSS 自定义属性间接设置，例如 <code>style="--vis: collapse"; visibility: var(--vis)：部分旧版浏览器不支持变量解析 collapse 值

    最稳妥的兜底方案：对 <tr> 用 <code>collapse 后，加一句 tr[hidden] { display: none } 并在 JS 中同步 toggle hidden 属性，确保降级可用。

    替代方案：什么时候该直接用 display: none？

    当你要隐藏的是：

    • 非表格元素（<div>、<code><section></section> 等）
    • 表格中带复杂嵌套或 position: absolute 子元素的 <tr> <li>需要确保屏幕阅读器跳过、键盘焦点不可达的场景（<code>visibility: hidden 不阻止焦点，collapse 更不保证）
    • 要在 Vue/React 中响应式控制显隐，且不希望 DOM 节点保留在内存中（visibility 不影响组件生命周期）

    注意：display: none 会触发重排，而 visibility: collapse 理论上只触发重绘——但现实中，Chrome 往往也重排，所以性能优势并不稳定。真正需要极致性能时，得结合 contain: layout paint 或虚拟滚动。