直接用 display: none 隐藏 tr 可行但 ie8-有兼容问题；hidden 属性语义好却受 css 优先级影响；visibility: hidden 会留空白；推荐统一用 class 控制并同步处理可访问性。
直接用 display: none 隐藏 tr 元素可行，但要注意浏览器兼容性差异
给 tr 标签加 style="display: none" 是最常用也最直接的方式，现代浏览器（Chrome、Firefox、Safari、Edge）都支持。但 IE8 及更早版本对表格元素的 display 值处理不一致，可能渲染异常或完全不生效。
实操建议：
- 优先用 class 控制，避免内联样式干扰维护：
.hidden-row { display: none; } - 不要写
display: block或display: flex来“恢复”tr，必须用display: table-row—— 否则整行塌陷或错位 - 若表格嵌在
flex或grid容器里，tr的display: none仍有效，但父容器布局逻辑可能掩盖问题
hidden 属性比 display: none 更语义化，但不支持动态 JS 切换回显
hidden 是 HTML5 原生布尔属性，写成 <tr hidden> 即可隐藏整行，语义清晰、无需 CSS，且对屏幕阅读器友好（默认跳过）。
<p>但它有个硬限制：用 JavaScript 设置 <code>el.hidden = false 并不能保证恢复显示——如果 CSS 中有更高优先级的 display: none 规则，hidden 会被覆盖，且浏览器不会自动清除该样式。
常见错误现象：
- JS 执行了
row.hidden = false，但行依然不可见 → 检查 DevTools 中display是否仍为none - 用
el.removeAttribute('hidden')后仍不显示 → 说明之前被 CSS 强制隐藏，需同步清理样式 -
hidden对td和th也有效，但对单元格单独使用时，不如用display: none精确控制列
用 visibility: hidden 隐藏行会保留空白，多数场景不适用
tr 上设 visibility: hidden 不会移除行高，它只是让内容不可见，但 tr 本身仍参与表格布局计算——结果是出现一条“透明空行”，上下边框/背景色可能残留，视觉上很奇怪。
这不是 bug，而是规范行为：visibility 对表格行级元素的支持本就有限，且不同浏览器渲染差异大（比如 Safari 可能忽略该声明）。
除非你明确需要占位+不可见（例如动画过渡中间态），否则别对 tr 用 visibility。真正需要保留空间的场景，更适合用 opacity: 0 + pointer-events: none，但这会让行仍可 tab 聚焦，可访问性风险高。
动态切换隐藏状态时，必须同步管理 class 和内联样式
单纯靠 JS 改 style.display 容易出问题：比如初始用 class 隐藏，后来 JS 改内联样式显示，再点一次又设内联 display: none，后续想用 class 控制就失效了——内联样式的优先级高于 class。
推荐做法是只操作 class：
- 定义两个 class：
.row-visible { display: table-row; }和.row-hidden { display: none; } - 用
element.classList.add('row-hidden')/.remove('row-hidden')切换 - 如果要兼容旧项目中已有的内联
display，先清空：el.style.display = ''，再操作 class - 别忘了同步处理辅助技术：添加
aria-hidden="true"（当隐藏行含重要信息时）
复杂点在于，表格结构本身没提供“列级响应式隐藏”的原生机制，所有基于 display 的方案都会影响渲染流；如果需要频繁切换列/行可见性，建议用虚拟滚动或数据驱动渲染（如 Vue/React 表格组件），而不是硬改 DOM 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
