hidden属性不能用于表格列显隐，仅对table、tr有效；th/td加hidden会破坏结构。正确做法是用data-column标记+CSS类切换，配合全局[hidden]{display:none!important}兜底。
hidden 属性在表格中不能直接用于“列显隐”
它对 <table>、<tr> 有效，但对 <th> 或 <td> 单独加 hidden 会破坏表格结构渲染：浏览器可能自动补空单元格、错位、甚至忽略该属性。这不是 bug，而是 HTML 表格模型决定的——hidden 是语义级移除，而表格行/列必须保持结构完整性。
- ✅ 可用：
<table hidden>、<tr hidden>（整表或整行隐藏） - ❌ 不可用：
<th hidden>、<td hidden>（列粒度失效，且不可靠） - ⚠️ 混用风险：若某
<tr>有hidden，其内部<td>即使没写hidden也会被一并剔除；但反向不成立——给单个<td>加hidden不保证整列对齐
想控制“列显隐”，必须用 data-column + CSS 类
真正可维护的方式是放弃 hidden，改用语义化标记 + 样式类切换：
- 在每个
<th>和对应所有<td>上统一加data-column="email" - CSS 定义：
.hidden-column { display: none; } - JS 切换：
document.querySelectorAll('[data-column="email"]').forEach(el => el.classList.toggle('hidden-column')) - 别用
visibility: hidden—— 它保留占位，列宽还在，会导致表格拉伸变形 - 不要依赖
nth-child(3)—— 后端增删列后立刻失效
hidden 在表格里唯一安全的动态用法
仅限整行或整表开关，且 JS 控制必须严格按规范来：
- ✅ 隐藏一行：
row.hidden = true（row是<tr>元素） - ✅ 显示一行：
row.hidden = false（不是"false"字符串） - ⚠️ 若之前设过
row.style.display = 'none'，得先清内联样式：row.style.display = ''，再设row.hidden = false - ⚠️ 检查状态用
if (row.hidden)，别用row.hasAttribute('hidden')—— SSR 场景下初始带hidden的元素，即使已设row.hidden = false，hasAttribute仍可能返回true
兜底 CSS 必须加，否则首屏闪现
服务端直出 <tr hidden> 时，若 CSS 还没加载完，用户会看到行先渲染再消失（FOVC）。唯一可靠解法是全局加：
立即学习“前端免费学习笔记（深入）”；
[hidden] { display: none !important; }
放在基础样式最底部或 @layer base 末尾。不加这条，hidden 在首屏就是裸奔状态。
表格列控制没有捷径，hidden 不是 display 开关，它是“逻辑不存在”的声明。真要列显隐，就得老老实实打 data-column 标签、写类、同步操作 <thead> 和 <tbody> —— 漏掉任何一个环节，对齐就崩了。
