窄屏幕下自动隐藏次要表格列的核心是语义标记（data-column或data-priority）+媒体查询+display:none精准控制，确保关键列始终可见、表头与数据一致且不占布局流。
窄屏幕下自动隐藏次要表格列，核心是“语义标记 + 媒体查询 + 精准控制”，不能靠列序（如 nth-child）硬写，否则一调顺序就错位、误藏关键字段。
用 data-column 统一标识列身份
给每列的 <th> 和所有对应 <td> 添加相同的 data-column 属性，让样式和逻辑绑定业务含义，而非位置：
<th data-column="name">姓名</th><th data-column="email">邮箱</th><td data-column="name">张三</td><td data-column="email">zhang@example.com</td>
在小屏断点下统一设 display: none
用媒体查询控制显隐，确保关键列始终可见，次要列在窄屏下退出渲染流：
- 默认不隐藏任何列（桌面优先）
- 在
@media (max-width: 414px)下，对非核心列加规则：.table [data-column="email"], .table [data-column="ip"] { display: none; } - 若需多档适配，可叠加不同断点，例如 768px 下只隐藏更次要的列
Bootstrap 或自定义框架中的增强做法
若用 Bootstrap，可结合 data-priority 属性实现分级隐藏：
- 给
<th>和对应<td>都加上data-priority="3"（数值越大优先级越低） - CSS 中写：
@media (max-width: 768px) { [data-priority="3"], [data-priority="4"] { display: none; } } - 务必保证
<thead>和<tbody>中同列的data-priority值完全一致，否则表头与数据错位
避坑要点
这些细节决定是否真正可用：
-
display: none是唯一能彻底移出布局流的方式；visibility: hidden或opacity: 0仍占位、可聚焦、影响可访问性 - 不要在
<colgroup>上设样式——它不支持display，也无法响应媒体查询 - 隐藏前确认：姓名、状态、操作按钮等关键字段必须始终保留在所有断点中
- 若表格含 JS 行为（如排序、导出），隐藏列后要同步更新逻辑，避免引用已不可见的字段
