响应式表格

通过滚动容器保证小屏可读

概念说明

当表格列数较多时，移动端容易溢出。常见做法是将表格放入可横向滚动的容器，同时设置最小宽度。

常见坑：直接给 table 设置 overflow-x 通常无效，必须使用外层容器。若只压缩列宽会导致可读性下降，建议设定 min-width 保持列宽稳定。

补充说明：当表格设置了 width: 100% 且没有 min-width，浏览器会把列宽压缩到容器宽度内，导致看起来“不滚动”。解决方式是给表格或列设置 min-width，让它超过容器宽度，再由外层容器滚动承载。

<div class="table-scroll">
  <table class="wide-table">...</table>
</div>

.wide-table {
  min-width: 640px;
  width: max-content;
}

可横向滚动的表格

项目	负责人	状态	优先级	开始时间	截止时间
移动端改版	陈洁	进行中	高	06-01	07-15
客服系统升级	王浩	排期中	中	07-05	08-10

.table-scroll {
  overflow-x: auto;
}

.wide-table {
  min-width: 640px;
}