最直接的方式是给目标列的 td、th 加类名（如 .col-actions），在媒体查询中设 display: none；需同时作用于 th 和 td，避免视觉错位，且要注意 table-layout: fixed 和 colgroup 对布局的影响。
用 @media 直接控制 td 和 th 的 display
最直接的方式是给目标列的 td、th 加类名（比如 .col-actions），然后在媒体查询里设 display: none。浏览器会真正移除该列，不影响表格结构语义，也不触发重绘异常。
- 必须同时写
th和td，否则表头还在但数据消失，视觉错位 - 不要只写
tr td:nth-child(4)这类选择器——列数一变就失效，维护成本高 - 如果用了
border-collapse: collapse，隐藏后相邻单元格边框可能“粘连”，可临时加border: 0避免视觉残留 - 示例：
@media (max-width: 768px) { .col-phone, .col-status { display: none; } }
visibility: hidden 和 display: none 的实际差异
两者看起来都是“看不见”，但对表格布局的影响完全不同。
-
visibility: hidden：单元格仍占位，宽度、高度、边框都保留，只是透明——会导致小屏下表格横向溢出或出现空白列 -
display: none：元素彻底退出文档流，表格自动重排，剩余列等宽撑满（前提是没设固定table-layout: fixed） - 若表格用了
table-layout: fixed且设置了width，隐藏列后其他列不会自动拉伸，需配合width: auto或 JS 动态重算
IE11 及旧版 Safari 下 display: none 隐藏列的兼容问题
老浏览器对表格元素的 display 值支持有限，display: none 在 td/th 上可能被忽略或导致整行错乱。
- 降级方案：改用
position: absolute; left: -9999px+clip: rect(0,0,0,0)组合隐藏（不推荐，影响可访问性） - 更稳妥的做法：用
opacity: 0+pointer-events: none配合aria-hidden="true"，再通过 JS 移除 DOM（仅当必须支持 IE11 时考虑） - 现代项目建议直接放弃 IE11 支持，用
display: none即可，它在 Chrome/Firefox/Safari/Edge 100% 可靠
用 JS 动态切换列时，别漏掉 colgroup 的同步
如果表格用了 <colgroup> 定义列宽，单纯隐藏 td 不会影响 col 元素——结果就是隐藏列后，剩余列宽度还是按原 col 设置分配，容易过窄或溢出。
- 要么删掉
colgroup，让浏览器自动计算列宽 - 要么在 JS 切换显示状态时，同步修改对应
col的display（注意：col不支持display: none，得用visibility: collapse） -
visibility: collapse是表格专属值，对col和tbody有效，对普通div无效——这点常被忽略
display: none 是首选，但必须确认没有 table-layout: fixed、colgroup 或旧浏览器兜底需求——这些地方一漏，小屏上就容易出现横向滚动条或错位。 
