visibility:collapse在table中不可靠，IE全版本视为hidden仍占位，Firefox在border-collapse下边框残留；display:none才是跨浏览器一致的隐藏方案。
visibility:collapse 在 table 行/列上根本不可靠
IE 完全不支持 visibility:collapse，所有版本（包括 IE11）都会把它当作 visibility:hidden 处理——即元素不可见但仍占位。Firefox 虽然支持该值，但只在 <tr>、<col> 等表格结构元素上按“移除布局空间”语义执行；可一旦父表启用了 border-collapse: collapse，Firefox 就只隐藏内容、不隐藏边框，导致视觉残留。
常见错误现象：
- 用
tr.coll { visibility: collapse; }隐藏某行，Chrome 看起来正常，Firefox 里那行的边框还在，像卡住了一样 - IE 下整行变透明但高度仍在，下方内容没上移，布局错位
替代方案：用 display:none 更稳妥
对需要真正“消失且不占空间”的 table 子元素，display:none 是唯一跨浏览器一致的选择。它在 IE、Firefox、Chrome、Edge 中行为完全统一：移除渲染、释放空间、不影响表格结构计算。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 动态隐藏/显示表格行（如筛选、折叠详情）
- 服务端渲染后由 JS 控制可见性，且需兼容 IE11 或旧版 Firefox
- 与
border-collapse: collapse共存时避免边框残留
注意：display:none 会破坏 <col> 或 <colgroup> 的列宽继承逻辑，若需隐藏列，建议改用 JS 动态移除对应 <col> 元素或统一用 width: 0; padding: 0; border: none; 配合 visibility:hidden 模拟。
如果非要保留 collapse，必须加降级判断
仅当明确放弃 IE 支持、且只面向现代 Firefox/Chrome 时，才考虑用 collapse。但即便如此，也得补一层防御：
- 用
@supports (visibility: collapse)包裹规则，防止低版本浏览器误解析 - 对
<tr>同时设置border: none和background: transparent，减少 Firefox 下边框残留概率 - 避免在
border-collapse: collapse的表中对<thead>或<th>单独设collapse，它们在 Firefox 中表现极不稳定
JavaScript 动态控制时别直接写 el.style.visibility = 'collapse'，先检测支持性：if ('CSS' in window && CSS.supports('visibility', 'collapse')) { ... }
最易被忽略的细节：collapse 不是 display 的替代品
visibility:collapse 的语义是“参与表格布局计算但不渲染”，而 display:none 是“完全退出文档流”。这意味着：
- collapse 下的
<tr>仍会影响table-layout: fixed的列宽分配 - collapse 的单元格内事件监听器依然能响应（比如
click），只是视觉不可见；display:none则彻底无法触发 - 屏幕阅读器对两者的处理差异极大：
collapse可能仍被读出，display:none几乎总是被跳过
实际项目中，95% 的“隐藏表格行”需求其实要的是 display:none 的行为——别被 collapse 的字面意思带偏。
