最稳做法是用data-column语义标记列并统一控制显隐：@media (max-width:414px){[data-column="phone"],[data-column="ip"]{display:none;}}，必须同时作用于th和td，禁用colgroup及visibility:collapse，优先使用display:none实现真隐藏。
用 data-column 标记列再写媒体查询最稳
直接写 td:nth-child(4) 隐藏第四列？列一变动就全乱。真正可维护的做法，是给每列单元格打语义标签：<th data-column="phone"> 和对应所有 <td data-column="phone">。媒体查询里统一控制：@media (max-width: 414px) { [data-column="phone"], [data-column="ip"] { display: none; } }。这样后端加列、前端调序都不影响逻辑。
display: none 必须同时作用于 th 和 td
只隐藏 tbody 里的 td，不碰 thead 的 th，浏览器会自动补空位或压缩宽度，表头和数据立刻错位。常见错误现象就是小屏下第一列内容跑到第二列位置上。正确做法是选择器覆盖整列：[data-column="actions"] 同时匹配 th 和 td，一步到位。
别碰 <colgroup> 做显隐控制
<col> 不支持 display: none，visibility: collapse 虽然能“视觉隐藏”，但在 Chrome/Firefox 渲染行为不一致，IE11+ 才支持，且 JS 动态切换时不可靠。表格没有原生“列”节点，所谓隐藏列，本质是对所有同列 th/td 的批量 DOM 操作。如果用了 <colgroup>，要么删掉它让浏览器自动计算列宽，要么在 JS 切换时同步改对应 <col> 的 visibility: collapse（注意：仅对 <col> 和 <tbody> 有效）。
现代项目直接用 display: none 就行
visibility: hidden 或 opacity: 0 看起来也是“看不见”，但单元格仍占位，小屏下极易横向溢出；display: none 才是真移除，布局自动重排。Chrome/Firefox/Safari/Edge 全部 100% 支持，无需兼容 IE11。唯一要注意的是：如果表格设了 table-layout: fixed 且带固定宽度，隐藏列后其他列不会自动拉伸——这时得配合 width: auto 或 JS 动态重算。
立即学习“前端免费学习笔记（深入）”；
