直接给<table>设置visibility: hidden可行但不推荐，因占位浪费空间；visibility: collapse仅对<tr><td><th><col>有效，隐藏且释放空间；对<td><th>禁用visibility: hidden以防边框残留和可访问性问题。
visibility: hidden 用于表格整体是否可行
直接给 <table> 设置 visibility: hidden 是可行的，元素会不可见但保留原始占位空间。不过这通常不是“隐藏特定表格”的合理场景——因为整表不可见时，visibility 和 display: none 的视觉效果几乎一样，但前者还多占空白，反而更浪费布局空间。
真正适合 visibility: hidden 的，是需要保持表格结构稳定、后续可能动态恢复显示、或依赖其占位做对齐/动画过渡的场合。
visibility: collapse 隐藏表格行或列才真正生效
visibility: collapse 是表格专属值，在 <tr>、<td>、<th>、<col> 上行为明确：隐藏且不占空间，同时不影响其他行列的对齐逻辑。这是它和 visibility: hidden 的关键区别。
常见误用是给 <table> 或普通 <div> 设 collapse —— 此时浏览器会降级为 hidden，失去“释放空间”的效果。
立即学习“前端免费学习笔记（深入）”；
-
<tr style="visibility: collapse;">→ 行被移除，下方行自动上移 -
<td style="visibility: collapse;">→ 单元格消失，右侧单元格左移补位（类似display: none） -
<col style="visibility: collapse;">→ 整列隐藏，列宽计算中被跳过
为什么不能对 td/th 直接用 visibility: hidden
可以加，但效果反直觉：visibility: hidden 在单元格上只会让内容透明，边框、背景、padding 全部还在，容易造成“空格错位”或“边框残留”。尤其当表格设了 border-collapse: collapse 时，相邻单元格的边框会异常连接，视觉污染严重。
更麻烦的是，屏幕阅读器仍会读出该单元格内容（因 DOM 未移除），而用户看到的却是空白，违反可访问性原则。
所以除非你明确需要“留白占位 + 内容不可见”，否则避免对 <td> 或 <th> 单独使用 visibility: hidden。
实际推荐做法：用 class + JavaScript 控制 visibility 状态
硬编码 style="visibility: collapse" 不利于维护。应统一用 CSS 类管理，并通过 JS 切换：
定义样式：
.hide-row { visibility: collapse; }
.hide-cell { visibility: collapse; }
.show { visibility: visible; }
切换逻辑示例：
document.querySelector('tr[data-id="row-2"]').classList.toggle('hide-row');
document.querySelector('td[data-col="price"]').classList.toggle('hide-cell');
注意点：
- 不要混用
display: none和visibility: collapse同一表格内，可能导致渲染冲突 -
visibility: collapse在 Firefox 和 Chrome 中行为一致，但 Safari 对<col>支持略弱，建议测试 - 如果表格含
rowspan/colspan，用collapse隐藏某单元格时，需确认跨格逻辑是否仍符合预期——它不会自动重排合并关系
collapse 在表格中实际会引发布局重算。这点容易被忽略，尤其在高频切换时可能影响性能。 
