应避免用 display: none 隐藏表格单元格，因其破坏表格结构；单格隐藏优先用 visibility: hidden，整列隐藏需同步处理 thead 和 tbody 并使用 data-column 标记与 CSS 类控制。
直接用 display: none 隐藏单元格会错位，别这么干
表格渲染机制和普通块级元素不同，display: none 会让浏览器“跳过”该 td 或 th 参与布局计算。后果很直接：后续列左移、colspan/rowspan 失效、边框对齐崩坏，尤其在 IE 或旧 Safari 下更明显。这不是样式没生效，是表格结构被破坏了。
如果你只是想视觉隐藏单个单元格（比如权限不足时不让看某字段值），优先选 visibility: hidden：
-
visibility: hidden在表格上下文中等价于visibility: collapse，保留位置、尺寸和行列关系 - 屏幕阅读器仍能读取内容（若需彻底隐藏，得加
aria-hidden="true"） - JS 仍可访问
textContent和属性，不影响数据逻辑
隐藏整列必须同步处理 thead 和 tbody
权限控制常涉及整列（如“薪资”列只对 HR 可见）。这时不能只 hide tbody td，否则 thead th 悬空，浏览器会自动补空列或压缩宽度，导致表头和数据错位——这是 HTML 表格渲染模型决定的，不是 bug。
可靠做法是用语义化标记 + CSS 类：
立即学习“前端免费学习笔记（深入）”；
- 给每列所有单元格统一加
data-column="salary"（包括<th>和所有对应<td>） - 定义 CSS：
.hidden-column { display: none; } - JS 控制时用
classList.toggle('hidden-column')，而不是直接改style.display（避免覆盖默认table-cell值，恢复困难）
注意：data-column 值建议全小写+短横线（如 last-login-time），避免空格或大写导致选择器失败；若用 React/Vue 渲染，确认框架透传该属性（React 需写成 ['data-column']）。
权限判断应放在服务端或初始化阶段，别靠 JS 动态查
用户权限信息通常来自后端，不要在前端 JS 里反复调用 API 判断“当前用户能不能看这一列”。既不安全，也影响性能。
推荐方式：
- 服务端渲染时，根据用户角色直接注入
data-permission="hr"到<table>或<body>上 - 或在页面初始化时，由后端返回权限配置 JSON，存入
window.userPermissions - 然后用一次性的 CSS 类批量控制：
document.querySelectorAll('[data-column="salary"]').forEach(el => { if (!userPermissions.includes('hr')) el.classList.add('hidden-column'); })
别把权限逻辑耦合进事件监听器里——每次点击都重查，容易漏状态、难调试。
用 hidden 属性要小心，它不等于 display: none
hidden 是 HTML 原生布尔属性，语义上表示“该元素不参与渲染”，但它对表格元素的行为不一致：部分浏览器仍保留占位，部分则像 display: none 一样破坏结构。实测中它不如 visibility: hidden 稳定，也不如 .hidden-column 类可控。
除非你明确需要原生语义且只针对整行/整表（如 <tr hidden>），否则对单元格或列的权限控制，坚持用 CSS 类 + display: none（整列）或 visibility: hidden（单格）更稳妥。
最易被忽略的一点：表格列显隐后，border-collapse: collapse 的边框可能残留虚影，建议配合 border: none 或重置 outline；如果用了 Shadow DOM，确认 .hidden-column 能穿透作用域生效。
