用data-column语义化标记列并统一控制显隐，避免nth-child等位置依赖；小屏隐藏时需同时处理th和td，禁用visibility:hidden和col元素；列数多时推荐data-label堆叠替代隐藏。

用媒体查询隐藏表格列，核心不是“怎么藏”，而是“藏得准、藏得稳、藏得语义完整”。直接对 <th> 或 <td> 用 display: none 是可行的，但必须同步处理整列所有单元格，且不能依赖位置索引（如 :nth-child(3)）。

必须用 data-column 标记列身份

每一列的表头和所有数据单元格都要带上相同语义标识，比如：

• <th data-column="phone">手机号</th>
• <td data-column="phone">139****5678</td>

这样无论列序怎么变、是否动态渲染，选择器 [data-column="phone"] 始终精准命中整列。避免用 th:nth-child(4) 这类写法——后端加一列，它就指向错误字段。

媒体查询中统一控制显隐

在 CSS 中定义响应式断点，对同一 data-column 值同时作用于 <th> 和 <td>：

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 小屏下隐藏手机号和操作列：@media (max-width: 768px) { [data-column="phone"], [data-column="action"] { display: none; } }
• 桌面端恢复显示：@media (min-width: 769px) { [data-column="phone"], [data-column="action"] { display: table-cell; } }

注意：不要只写 td[data-column="phone"]，漏掉 th 就会导致表头残留、数据错位。

避开常见陷阱

有些做法看似省事，实则埋雷：

• 禁用 visibility: hidden——它保留占位空间，列宽还在，容易撑破容器或导致横向滚动异常
• 别碰 <col> 元素——它不响应 display，设了也无效
• 如果用了 table-layout: fixed，隐藏列后其他列不会自动拉伸；需要配合 width: auto 或 JS 重算，否则留白难看
• 邮件模板慎用该方案——Outlook 基于 Word 渲染引擎，完全不支持 table-layout: fixed 和属性选择器

更稳妥的小屏替代方案：data-label 堆叠

当列数 ≥4 或字段语义强（如“下单时间”“收货人电话”），横向滚动体验差。推荐用堆叠代替隐藏：

• 每个 <td> 加 data-label="下单时间"
• 小屏下设 thead { display: none; }，tbody tr { display: block; }，td { display: block; position: relative; }
• 用 td::before { content: attr(data-label) ": "; font-weight: bold; } 把表头语义注入每条记录

这种方式不破坏可访问性，屏幕阅读器能正常读取字段含义，也规避了列数错位风险。