hidden属性对表格列隐藏不真正生效，因仅隐藏单个单元格而不影响列宽与对齐；可靠方式是用data-column标记整列单元格并配合.hidden-column{display:none}统一控制thead/th和tbody/td。
hidden 属性对表格列的隐藏是否真正生效？
不生效。HTML 的 hidden 属性作用于元素本身，但表格结构有特殊性：<td> 或 <th> 被设为 hidden 后，其所在列的其他单元格仍会保留原有列宽（除非整列所有单元格都设 hidden），浏览器不会自动“塌缩”该列。视觉上可能看似隐藏，但实际布局未变，colspan 和 rowspan 行为也容易出错。
用 CSS 隐藏整列更可靠的方式是什么？
推荐用 display: none 作用于 <col> 元素或统一给列内所有 <td>/<th> 加类名控制。注意：<col> 必须放在 <colgroup> 内，且仅影响列宽和部分样式，不能直接设 display: none（多数浏览器忽略）；真正起效的是给单元格加 display: none：
<table>
<colgroup>
<col><!-- 第1列 -->
<col class="hidden-col"><!-- 第2列 -->
</colgroup>
<tr>
<td>A</td><td class="hidden-col">B</td>
</tr>
<tr>
<td>C</td><td class="hidden-col">D</td>
</tr>
</table>.hidden-col { display: none; } 才能真正移除渲染空间。若需保留数据供 JS 读取，可改用 visibility: hidden + position: absolute 等组合，但会破坏表格流式布局，慎用。
为什么不能只给 <th> 加 hidden 而忽略 <td>？
表格是行列对齐结构，单个表头隐藏而对应数据单元格未隐藏，会导致列内容错位、表头与数据脱节。常见错误现象包括：
立即学习“前端免费学习笔记（深入）”；
-
<th hidden>Name</th>+<td>Alice</td>→ 表头消失，但 “Alice” 仍占据原列位置，视觉上向左偏移 - 使用
aria-hidden="true"时，屏幕阅读器跳过表头，但数据单元格未同步标记，语义断裂 - JS 动态增删行时，若只操作
<th>的hidden属性，新增的<td>仍可见，逻辑不一致
需要响应式隐藏列时，CSS 媒体查询怎么写才安全？
直接在媒体查询中控制单元格显隐即可，但要注意两点：一是避免用 visibility: hidden，它保留占位；二是确保所有同列单元格（含表头）一并处理。例如：
@media (max-width: 768px) {
.mobile-hide {
display: none !important;
}
}然后给整列单元格统一加 class="mobile-hide"。不要依赖 <col> 的宽度设为 0 或 width: 0，因为表格算法会优先保证内容可读性，这类设置常被忽略或触发意外换行。
真正麻烦的不是加样式，而是后续 JS 操作——比如排序、导出 CSV 时，得主动过滤掉带 display: none 的单元格，否则数据会错乱。这点容易被忽略。
