直接为tr、td或th添加hidden属性即可隐藏，无需css或js；hidden是布尔属性，推荐简写为hidden；常见失效原因是css强制覆盖，需用[hidden]{display:none!important}兜底；其语义和布局行为优于display:none，且具继承性。
直接给 tr、td 或 th 加 hidden 就行
不需要额外 CSS，也不用写 JS。只要在想隐藏的表格单元或行上加 hidden 属性，浏览器就会立刻移除它——不占空间、不可聚焦、不被读屏软件读取。
比如隐藏某一行：
<tr hidden> <td>Peter</td> <td>20</td> </tr>
或者只隐藏某个单元格：
<td hidden>20</td>
注意：hidden 是布尔属性，写成 hidden="" 或 hidden="anything" 都有效，但推荐只写 hidden。
为什么有时加了 hidden 却没效果
最常见原因是被 CSS 强制覆盖。比如写了 style="display: table-row;" 或外部样式里有 tr { display: table-row !important; }，就会让 hidden 失效。
- 检查是否有内联
style直接设置了display、visibility或opacity - 确认没有全局或局部 CSS 规则用
!important覆盖了[hidden]的默认样式 -
[hidden] { display: none; }是浏览器内置样式，但它优先级很低，容易被覆盖
稳妥做法：在基础 CSS 里加一句兜底规则（放在最末或 @layer base 中）：
[hidden] { display: none !important; }
hidden 和 display: none 在表格里表现不同
表面上都是“看不见”，但在表格语义和布局行为上差得挺多：
-
hidden会让tr完全退出表格渲染流——它的offsetHeight恒为 0，且不会影响其他行的border-collapse行为 -
display: none对tr同样生效，但对td或th可能触发浏览器兼容性差异（比如旧版 Safari 对display: none的td渲染异常） -
hidden具有继承性：父tr hidden时，所有子td、th自动隐藏，哪怕它们自己没写hidden - 用
display: none隐藏单个td，可能造成该行单元格错位（尤其在border-collapse: collapse下）
JS 动态控制表格行/单元格显隐时别踩这些坑
不要用 setAttribute('hidden', '') 或 removeAttribute('hidden') —— 虽然能工作，但易出错且语义不清。
正确方式是直接操作 DOM 元素的 hidden 属性：
const row = document.querySelector('tr:nth-child(2)');
row.hidden = true; // ✅ 隐藏
row.hidden = false; // ✅ 显示（自动移除属性）
特别注意：
- 如果之前用
row.style.display = 'none'隐藏过，要先清空：row.style.display = ''，再设row.hidden = false，否则仍不可见 - 用
row.hidden = false恢复显示后，若该行有required输入框，验证状态不会自动刷新，需手动调用row.checkValidity() -
hidden不触发 CSS 过渡，所以不能做淡入淡出；如需动画，得先用opacity或transform过渡，最后再设hidden = true
真正麻烦的不是加 hidden，而是它被 CSS 覆盖、被 JS 误操作、或跟表格固有渲染逻辑撞车——这些地方一漏，就变成“明明写了却看不到效果”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
