设 display: none 可彻底隐藏表格但需谨慎：仅作用于最外层 table 或 tbody；避免单独设 tr/td；JS 恢复时应保存并还原原始 display 值，优先用 class 控制；hidden 属性更语义化且支持 JS 直接操作。
直接给 <table> 元素设 <code>display: none 就能彻底移除它——但表格结构特殊，硬套通用规则容易翻车，尤其在嵌套、父子关系或动态操作时。
为什么 table 元素设 display:none 后整行/整表塌陷？
因为 <table> 的默认 <code>display 值是 table，不是 block；<tr> 是 <code>table-row，<td> 是 <code>table-cell。这些值彼此强耦合。一旦你对 <tr> 或 <code><td> 单独设 <code>display: none，浏览器会破坏表格渲染树，导致父级 <table> 或 <code><tbody> 高度计算异常，甚至整行“消失”却没腾出空间。
<ul><li>✅ 正确做法：只对最外层 <code><table>（或整个 <code><tbody>）设 <code>display: none
<tr> 设 <code>display: none，指望它“隐身不占位”——实际可能让后续行错位或父容器高度不收缩
display: flex 或 display: grid 容器里，父级的布局模式会覆盖 table 的默认行为，此时 display: none 仍生效，但恢复时必须还原为 table，不能写成 block
JavaScript 动态隐藏表格时，如何避免恢复失败？
用 element.style.display = 'none' 隐藏很简单，但恢复时若直接写 element.style.display = 'table'，看似合理，却常因原始样式来源不同而失效——比如表格原本靠 CSS 类设置了 display: table !important，JS 内联样式就被压制了；或者框架（如 Vue）下次更新自动重写了 style。
- 优先用 class 控制：定义
.is-hidden { display: none; }，切换用el.classList.add('is-hidden')和.remove() - 必须用 JS 直接操作时，先存原始值：
const orig = window.getComputedStyle(el).display;，恢复时赋回el.style.display = orig - 别依赖
el.style.display = ''清空——它只清内联样式，不影响 CSS 文件里的规则 - React/Vue 场景下，坚决避免直接改
style.display，应通过 state 控制 class 或使用hidden属性
display:none 对表格功能和可访问性的隐性影响
display: none 不仅让表格不可见，还会让它从屏幕阅读器中完全消失、不参与表单提交、不触发任何事件监听器。这点比 visibility: hidden 或 opacity: 0 更“彻底”，但也更危险。
立即学习“前端免费学习笔记（深入）”；
- 表单内的
<input>在<table> 设 <code>display: none后，其值不会被提交——即使 DOM 还在 - 如果该表格承载关键数据（如筛选条件、状态汇总），又没做其他 ARIA 标注，视障用户将完全感知不到它的存在
- 想保留语义但视觉隐藏？改用
hidden属性：<table hidden>，它等价于 <code>display: none，但语义更明确，且支持element.hidden = true/false直接控制 - 需要动画？
display: none不可过渡，得换方案：先设max-height: 0+overflow: hidden，再配合transition模拟收起效果
表格不是普通块级元素，它的 display 值是语义+布局双重绑定的。设 display: none 能“移除”，但恢复时若忽略原始类型、CSS 优先级或框架生命周期，就不是“一设一消”那么简单了。
