table不能直接设overflow-x: auto，需用div容器包裹并设table-layout: fixed、min-width及white-space控制，移动端列多时应降级为响应式列表。

table外层必须用

包住，不能直接给table加overflow

直接在table上写overflow-x: auto无效——table是替换元素，其溢出行为受table-layout和内部盒模型限制，浏览器根本不响应这个属性。

正确做法是用一个div作为容器，显式设为块级、限定宽度并启用横向滚动：

• div.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
• table本身要设min-width（比如min-width: 600px），否则窄屏下缩得太小，文字糊成一片
• 别忘了加viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1">，否则iOS Safari可能忽略width: 100%

为什么加了width: 100%还是撑出屏幕？

因为浏览器默认用table-layout: auto，它会等所有内容（长URL、连续英文、图片）加载完才计算列宽。小屏下某列被撑开，整行就歪掉，width: 100%只是把“歪掉的整张表”拉满父容器。

必须显式设置table-layout: fixed，但有两个前提：

• table得有width: 100%（否则fixed不触发）
• 至少一个<col>或第一行<th>带<code>width（推荐用百分比，如width: 20%），否则剩余列均分，容易失衡

  滚动时文字被截断或显示不全

  常见原因是td里用了white-space: nowrap（比如日期、ID字段常用），但没配text-overflow: ellipsis和overflow: hidden。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  要让关键字段可读又不撑破列宽，得组合控制：

  • td.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • 如果单元格里嵌了<div>或<code><span></span>，它们默认继承white-space: nowrap，得单独重置：td div { white-space: normal; }
  • 图片和<code>类内容需额外约束：img { max-width: 100%; height: auto; }，td code { word-break: break-all; }

  移动端列数 ≥ 4 时，滚动不是最优解

  横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。

  这时候该主动降级，而不是硬撑表格结构：

  • 给每行<tr>加<code>data-label，例如<tr data-label="订单 #12345"><li>小屏媒体查询里隐藏<code><thead>和原始<code><th>，用<code>tr:before显示data-label
  • 把每个<td>设为<code>display: block，再用td:before { content: attr(data-label) ": "; }补字段名

    真正难的不是写CSS，是判断什么时候该放弃表格、什么时候该用table-layout: fixed、以及哪些字段必须保留完整文本——这些得看业务场景，不是靠一套样式能兜底的。