最稳定可维护的方式是用data-column属性标记列并配合媒体查询统一控制显隐；必须同步隐藏thead和tbody中所有对应列单元格，避免错位，且优先通过class切换而非直接操作style.display。
直接用 display: none 配合 [data-column="xxx"] 选择器，在媒体查询里控制整列显隐，是最稳定、可维护的方式。别碰 <col>、别依赖 nth-child、也别只隐藏 <td> 忘了 <code><th>。
<h3>为什么必须用 data-column 而不是 nth-child</h3>
<p>列顺序一变，<code>td:nth-child(3) 就指向错列；后端加个条件字段、前端插个空列、Vue 动态渲染删掉某列——nth-child 立刻失效。而 data-column="email" 是语义化身份标签，和位置无关。
-
data-column值统一用小写+短横线，比如last-login-time，避免空格或大写导致选择器匹配失败 - React 中需写成
data-column="email"（不能写dataColumn），否则属性被过滤 - Vue 渲染时确认
v-bind:正确透传该属性，别被v-html或模板编译吃掉
媒体查询里怎么写才不崩表头
只隐藏 <tbody> 里的 <code><td>，却不处理 <code><thead> 的 <code><th>，浏览器会自动补白或压缩宽度，表头和数据必然错位。
<ul><li>必须一次性选中整列所有单元格：<code>document.querySelectorAll('[data-column="phone"]') 天然包含 <th> 和所有 <code><td>
<li>如果表格含 <code><tfoot>，也要纳入查询范围，否则页脚列对不齐
<li>媒体查询示例：<pre class="brush:php;toolbar:false;">@media (max-width: 414px) {
[data-column="phone"],
[data-column="address"] {
display: none;
}
}</pre>
</li>
<h3>display: none 在表格里有什么坑</h3>
<p>它确实能彻底移除元素、重排剩余列，但前提是没锁死布局。一旦用了 <code>table-layout: fixed 或 <colgroup></colgroup> 定宽，隐藏列后其他列不会自动拉伸。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若用了
<colgroup></colgroup>，JS 切换显隐时得同步操作对应<col>：只能设visibility: collapse（display: none对<col>无效） - 别在内联样式里手动写
style.display = 'table-cell'恢复——不同浏览器对表格元素默认display值解析不同 - 优先用
el.classList.toggle('hidden-column')，CSS 里只定义.hidden-column { display: none; }
移动端堆叠显示替代方案
当屏幕太窄、连关键列都塞不下时，display: none 整列就不是最优解了。改用 data-label + 块级堆叠，语义和可访问性都更健壮。
- 每个
<td> 加 <code>data-label，值与对应<th> 文本严格一致：<code><td data-label="邮箱">zhang@example.com</td> - CSS 关键三步：
tbody tr { display: block; }、tbody td { display: block; }、td::before { content: attr(data-label) ": "; } - 必须加
thead { display: none; }，否则屏幕阅读器会重复读表头
真正麻烦的不是“怎么藏”，而是藏完之后列宽是否塌缩、表头是否对齐、<colgroup></colgroup> 是否干扰、以及 JS 动态增删行后规则是否还生效——这些细节不提前对齐，上线后就是线上事故。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
