hidden属性不能用于表格列显隐，仅对table、tr有效；th/td加hidden会破坏结构。正确做法是用data-column标记+css类切换，配合全局[hidden]{display:none!important}兜底。
hidden 属性在表格中不能直接用于“列显隐”
它对 <table>、<code><tr> 有效，但对 <code><th> 或 <code><td> 单独加 <code>hidden 会破坏表格结构渲染：浏览器可能自动补空单元格、错位、甚至忽略该属性。这不是 bug，而是 HTML 表格模型决定的——hidden 是语义级移除，而表格行/列必须保持结构完整性。
- ✅ 可用：
<table hidden>、<code><tr hidden>（整表或整行隐藏） <li>❌ 不可用：<code><th hidden>、<code><td hidden>（列粒度失效，且不可靠） <li>⚠️ 混用风险：若某 <code><tr> 有 <code>hidden，其内部<td> 即使没写 <code>hidden也会被一并剔除；但反向不成立——给单个<td> 加 <code>hidden不保证整列对齐想控制“列显隐”，必须用 data-column + CSS 类
真正可维护的方式是放弃
hidden，改用语义化标记 + 样式类切换：- 在每个
<th> 和对应所有 <code><td> 上统一加 <code>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)—— 后端增删列后立刻失效 - ✅ 隐藏一行：
row.hidden = true（row是<tr> 元素） <li>✅ 显示一行：<code>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
hidden 在表格里唯一安全的动态用法
仅限整行或整表开关，且 JS 控制必须严格按规范来：
兜底 CSS 必须加，否则首屏闪现
服务端直出
<tr hidden> 时，若 CSS 还没加载完，用户会看到行先渲染再消失（FOVC）。唯一可靠解法是全局加： <pre class="brush:php;toolbar:false;">[hidden] { display: none !important; }</pre> <p>放在基础样式最底部或 <code>@layer base末尾。不加这条，hidden在首屏就是裸奔状态。表格列控制没有捷径，
hidden不是 display 开关，它是“逻辑不存在”的声明。真要列显隐，就得老老实实打data-column标签、写类、同步操作<thead> 和 <code><tbody> —— 漏掉任何一个环节，对齐就崩了。</tbody> - 在每个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
