应使用 visibility: hidden 而非 display: none 隐藏表格单元格，因其保留布局位置与结构，兼容 colspan/rowspan，支持无障碍和 js 访问，推荐通过 class 控制。
直接对 td 或 th 用 display: none 会出问题
别一上来就给单元格加 style="display: none"。表格渲染机制特殊，display: none 会让浏览器“跳过”该单元格参与布局计算，后续列可能左移、错位，尤其当行里有 colspan 或 rowspan 时，整行结构容易崩。IE 和旧版 Safari 对这种写法支持更差，连 border-collapse 都可能失效。
visibility: hidden 是最稳妥的视觉隐藏方式
它让单元格内容不可见，但保留原始位置、尺寸和表格结构，不会影响其他单元格对齐。注意：对 td/th 使用 visibility: hidden 的行为等同于 visibility: collapse（在表格上下文中二者表现一致），所以无需额外处理。
- 适用于需要保持列宽、边框对齐、响应式表格的场景
- 屏幕阅读器仍能读取内容（若需无障碍隐藏，得配合
aria-hidden="true"） - JavaScript 仍可访问该单元格的
textContent和属性，不影响数据逻辑
用 class 控制比内联样式更可靠
硬编码 style 属性难维护，也容易被其他 CSS 覆盖。推荐定义明确语义的 class：
`.hidden-cell { visibility: hidden; }`
然后在 HTML 中使用：
<td class="hidden-cell">不该显示的数据</td>
- 方便通过 JS 切换：
cell.classList.toggle('hidden-cell') - 避免 inline style 权重过高导致调试困难
- 多个单元格复用同一规则，CSS 更易压缩和缓存
真正要“移除数据”就得改 DOM 结构或用 type="hidden" 替代
如果目标不是“视觉隐藏”，而是“不让用户看到且不参与任何逻辑”，那 visibility 或 display 都不合适——它们只是藏起来，DOM 还在。此时应考虑：
- 后端不返回该字段，前端压根不渲染这个
td - 用
<input type="hidden">存值，而不是塞进表格单元格 - JS 动态移除节点：
cell.remove()，但要注意这会触发重排，且影响rowIndex/cellIndex计算
表格里藏数据，最容易被忽略的是语义断裂：一个 td 看不见，但它依然在 tr.cells 集合里，cellIndex 也不变——这点常被脚本逻辑误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
