最可靠的方式是用语义化 data-column 属性标记整列单元格并配合媒体查询统一控制显隐，而非依赖 nth-child 伪类；必须同步隐藏 thead 和 tbody 中对应列，避免错位，且优先通过 class 切换而非直接操作 style.display。
用 data-column 标记列再配合媒体查询隐藏最可靠
直接写 td:nth-child(2) 或 th:nth-child(2) 隐藏第二列？一旦后端加了一列或前端模板调整顺序，整个逻辑就崩了。真正能长期维护的方式，是给列打语义化标签。
必须同时在 <th> 和所有对应 <code><td> 上加相同 <code>data-column 属性，比如：<th data-column="phone">手机号</th><td data-column="phone">138****1234</td>
-
data-column值统一用小写+短横线（如last-login-time），避免空格或大写导致选择器失效 - Vue/React 渲染时要确认该属性没被框架过滤掉（尤其 React 里需用
data-*形式） - 媒体查询里用
[data-column="phone"] { display: none; }，比依赖位置的伪类稳定得多
@media 中隐藏列必须同步处理 <thead> 和 <code><tbody><p>只隐藏 <code><tbody> 里的 <code><td>，却不碰 <code><thead> 的 <code><th>，浏览器会自动补空列或压缩宽度，表头和数据错位是必然结果。
<p>正确写法是把整列单元格一并控制：</p>
<pre class="brush:php;toolbar:false;">@media (max-width: 414px) {
[data-column="phone"],
[data-column="address"] {
display: none;
}
}</pre>
<ul>
<li>断点值建议按真实设备定：主流手机是 <code>360px（安卓中端）、414px（iPhone Plus）、390px（iPhone 12+），别硬套过时的 768px
display: none 是真隐藏——不占空间、不触发事件、不被读屏软件读取；别用 opacity: 0 或 visibility: hidden 替代，它们会留白、可聚焦、影响键盘导航[data-column="xxx"] 选择器能穿透作用域生效别碰 <colgroup></colgroup> 做显隐控制
<colgroup></colgroup> 和 <col> 不参与渲染流程，display 对它无效，visibility: collapse 虽然能“视觉隐藏”列，但行为不可靠：IE10+ 才支持，Chrome/Firefox 渲染表现不一致，且无法配合 JS 动态切换。
- 表格没有原生“列”节点，所谓“隐藏列”本质是对所有同列
<th>/<code><td> 的批量操作 <li> <code><col>只能设宽高、背景色等有限样式，不能控制显隐逻辑 - 想动态开关列？JS 必须操作 DOM 元素本身，而不是试图改
<col>标签
JS 切换列显隐优先用 classList.toggle() 而非 style.display
写 el.style.display = 'none' 看似快，但表格单元格默认是 table-cell，手动设成 none 后再恢复，很难准确还原原始 display 值——不同浏览器对表格元素的默认解析有差异。
推荐方案：CSS 定义 .hidden-column { display: none; }，JS 只管开关类名：
document.querySelectorAll('[data-column="email"]').forEach(el => {
el.classList.toggle('hidden-column');
});
- 样式逻辑完全交给 CSS，JS 只做状态切换，解耦清晰
- 兼容主题切换、暗色模式等场景，类名可被其他 CSS 规则覆盖
- 如果表格列数多、行数大，批量操作前建议用
DocumentFragment或requestIdleCallback控制渲染节奏，避免卡顿
data-column 必须贯穿整列所有单元格，且媒体查询断点要匹配真实设备宽度，不是设计稿上随便写的数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
