17370845950

先用 overflow-x: auto 确保表格可横向滚动，再通过 media queries 优化小屏显示。具体做法是：将表格包裹在设置 overflow-x: auto 的容器中，防止溢出；窄屏下使用 flex 布局堆叠行内容，配合 :before 提升可读性，并通过 hide-on-small 类隐藏次要列，提升移动端体验。

在网页开发中，表格在小屏幕上容易溢出容器，影响用户体验。通过结合 overflow auto 和 media queries，可以轻松实现响应式表格布局。核心思路是：在窄屏下让表格可横向滚动，必要时调整单元格显示方式。

使用 overflow-x: auto 包裹表格

将表格放在一个容器内，设置容器的 overflow-x: auto，这样当表格宽度超过容器时，用户可以横向滚动查看完整内容。

这样做能防止表格撑破父容器，适用于大多数场景。注意不要给表格设置固定宽度过大，避免失效。

配合 Media Queries 调整显示

在更小的屏幕上，可以进一步优化表格结构。比如切换为块级布局、隐藏次要列或堆叠行内容。

@media (max-width: 768px) {
  .table th,
  .table td {
    display: block;
  }

  .table tr {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
  }

  .table th:first-child,
  .table td:first-child {
    font-weight: bold;
    background: #f0f0f0;
  } }

这种堆叠方式把每行变成垂直排列，适合手机查看。可以用 :before 伪元素添加列名标签，提升可读性。

隐藏非关键列提升体验

有些数据在移动端不是必须展示的。可以通过媒体查询选择性隐藏。

在HTML中给不重要的 th 和 td 加上这个类，就能在小屏自动隐藏，保持界面简洁。

基本上就这些。关键是先用 overflow-x: auto 保证基本可用性，再通过 media queries 逐步增强移动端体验。不复杂但容易忽略细节。