visibility: collapse仅对表格元素有效，非表格元素等价于hidden；折叠列必须用<col>元素并设collapse，行可用tr:nth-child；IE不支持collapse需降级处理。
visibility: collapse 只对表格相关元素有效
直接给 <div> 或 <p> 设置 visibility: collapse 不会节省空间，它在非表格元素上等价于 visibility: hidden —— 元素不可见但依然占位。真正起效的场景仅限：<table>、<tr>、<thead>、<tbody>、<tfoot>、<col>、<colgroup>。
折叠表格列必须用 <col> 元素绑定类名
HTML 中没有原生的“列标签”，<col> 是唯一能代表一列并承载样式的语义化元素。没写 <col>，光靠 td:nth-child(2) 选中单元格再设 visibility: collapse 是无效的 —— 浏览器不认这种“模拟列”的折叠逻辑。
正确做法是：
- 在
<table>开头显式插入对应数量的<col>，例如 12 列就写 12 个<col class="m01">~<col class="m12"> - 用类名（如
.m04）精准控制某列，CSS 写.m04 { visibility: collapse; } - 避免用
col:nth-child(4)，部分浏览器对伪类在<col>上的支持不稳定
折叠表格行时，tr:nth-child(n) 是安全写法
相比列，行的结构更直观，<tr> 是真实存在的 DOM 元素，所以 tr:nth-child(2) 这类选择器可以直接生效。
立即学习“前端免费学习笔记（深入）”；
但要注意：
-
visibility: collapse对<tr>生效后，该行内容消失，下方行会上移填补空隙，且不触发重排（re-layout），比display: none更轻量 - 不要混用
display: none和visibility: collapse在同一张表里 —— 它们对表格内部尺寸计算机制不同，可能导致列宽错乱 - IE 系列（含 IE11）对
collapse支持不一致；Firefox 和现代 Chrome/Edge 表现可靠
collapse 的兼容性坑和 fallback 方案
visibility: collapse 在旧版 IE（包括 IE11）中会被降级为 hidden，即行/列仍占位。如果你必须支持这些环境，得准备降级逻辑：
- 检测浏览器是否支持
collapse：运行getComputedStyle(document.body).visibility = 'collapse'并检查返回值是否为'collapse' - 不支持时，改用
display: none+ 手动保存/恢复列宽（通过col.style.width记录原始值） - 或者放弃动态折叠，改用服务端渲染不同列数的表格 HTML
最常被忽略的一点：折叠后，<col> 元素本身仍存在于 DOM 中，它的 offsetWidth 为 0，但 getBoundingClientRect() 可能返回异常值 —— 别依赖它做 JS 尺寸计算。
