窄屏幕下自动隐藏次要表格列的核心是语义标记（data-column或data-priority）+媒体查询+display:none精准控制，确保关键列始终可见、表头与数据一致且不占布局流。

窄屏幕下自动隐藏次要表格列，核心是“语义标记 + 媒体查询 + 精准控制”，不能靠列序（如 nth-child）硬写，否则一调顺序就错位、误藏关键字段。

用 data-column 统一标识列身份

给每列的 <th> 和所有对应 <code><td> 添加相同的 <code>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

用媒体查询控制显隐，确保关键列始终可见，次要列在窄屏下退出渲染流：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 默认不隐藏任何列（桌面优先）
• 在 @media (max-width: 414px) 下，对非核心列加规则：
  .table [data-column="email"], .table [data-column="ip"] { display: none; }
• 若需多档适配，可叠加不同断点，例如 768px 下只隐藏更次要的列

Bootstrap 或自定义框架中的增强做法

若用 Bootstrap，可结合 data-priority 属性实现分级隐藏：

• 给 <th> 和对应 <code><td> 都加上 <code>data-priority="3"（数值越大优先级越低）
• CSS 中写：
  @media (max-width: 768px) { [data-priority="3"], [data-priority="4"] { display: none; } }
• 务必保证 <thead> 和 <code><tbody> 中同列的 <code>data-priority 值完全一致，否则表头与数据错位

  避坑要点

  这些细节决定是否真正可用：

  • display: none 是唯一能彻底移出布局流的方式；visibility: hidden 或 opacity: 0 仍占位、可聚焦、影响可访问性
  • 不要在 <colgroup></colgroup> 上设样式——它不支持 display，也无法响应媒体查询
  • 隐藏前确认：姓名、状态、操作按钮等关键字段必须始终保留在所有断点中
  • 若表格含 JS 行为（如排序、导出），隐藏列后要同步更新逻辑，避免引用已不可见的字段