50. 表格的响应式处理

表格天生是”宽”的。列一多，小屏幕上就装不下，内容会溢出屏幕边缘。

为什么表格需要响应式处理

手机屏幕通常只有 375px 宽。如果你的表格有 6 列，每列至少 100px，那就撑出了 600px。

结果就是页面出现横向滚动条，用户需要左右滑动才能看全数据。这体验很差。

方案一：横向滚动

最简单的办法：让表格容器可以左右滚动。

把表格包在一个 div 里，设置 overflow-x: auto。

<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
      <th>职业</th>
      <th>邮箱</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
      <td>工程师</td>
      <td>zhang@example.com</td>
      <td>13800138000</td>
    </tr>
  </table>
</div>

div {
  overflow-x: auto;
}

overflow-x: auto 的意思是：内容超出时自动出现滚动条。没超出就不显示。

方案二：隐藏次要列

移动端空间有限，可以只显示最重要的列，其余的藏起来。

用 CSS 的 @media 查询，在小屏幕下隐藏特定列。

@media (max-width: 600px) {
  .secondary {
    display: none;
  }
}

<th>姓名</th>
<th class="secondary">年龄</th>
<th>城市</th>
<th class="secondary">职业</th>
<th class="secondary">邮箱</th>
<th class="secondary">电话</th>

这样手机上只显示”姓名”和”城市”两列，其他信息在大屏才展示。

方案三：卡片化布局

还有一种思路：小屏幕上干脆不显示表格，改成每行数据一个卡片。

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead {
    display: none;
  }
  tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 80px;
  }
}

<td data-label="姓名">张三</td>
<td data-label="年龄">28</td>
<td data-label="城市">北京</td>

每一行数据变成一个小卡片，用 data-label 属性显示列名。

三种方案对比

方案	优点	缺点	适用场景
横向滚动	简单、保留完整数据	需要手动滑动	数据多但不复杂
隐藏列	节省空间	部分信息不可见	有主次之分的表格
卡片化	移动端体验最好	改动量大	移动端优先的项目