最直接的方式是给目标列的 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 的实际差异

两者看起来都是“看不见”，但对表格布局的影响完全不同。

美洽

一款AI办公效率工具，主要用于全球AI智能客服系统提供商，提供大模型获客机器人、全渠道客服、客服机器人、电话客服等产品，适合需要提升相关任务效率的用户。

下载

• 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></colgroup> 定义列宽，单纯隐藏 td 不会影响 col 元素——结果就是隐藏列后，剩余列宽度还是按原 col 设置分配，容易过窄或溢出。

• 要么删掉 colgroup，让浏览器自动计算列宽
• 要么在 JS 切换显示状态时，同步修改对应 col 的 display（注意：col 不支持 display: none，得用 visibility: collapse）
• visibility: collapse 是表格专属值，对 col 和 tbody 有效，对普通 div 无效——这点常被忽略

表格响应式隐藏列的核心不是“怎么藏”，而是“藏完之后布局是否还自然”。display: none 是首选，但必须确认没有 table-layout: fixed、colgroup 或旧浏览器兜底需求——这些地方一漏，小屏上就容易出现横向滚动条或错位。