直接给表格父容器加overflow-x:auto才有效，因table自身不响应overflow；须用div包裹并设display:block、overflow-x:auto和-webkit-overflow-scrolling:touch，且避免white-space:nowrap、未约束图片及table-layout:fixed无列宽定义等常见错误。

给表格父容器加 overflow-x: auto

手机端表格内容宽于屏幕时，直接对 <table> 本身设 <code>overflow 没用——table 默认是内联块行为，且不触发 BFC。正确做法是套一层容器，并设为块级 + 可横向滚动：

• 用 <div class="table-container"> 包住整个 <code><table> <li>CSS 中写：<code>.table-container { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
• -webkit-overflow-scrolling: touch 很关键，否则 iOS 上滚动卡顿、松手即停

为什么不能只设 table { width: max-content }

有人试过给 table 加 width: max-content 再配 overflow，但多数安卓 WebView 和旧版 Safari 不支持该值在表格上的渲染；即使支持，也容易因单元格内联元素（如图片、span）未约束宽度而撑破容器。更稳的方式是让父容器“不管内容多宽，都允许滚”，而不是让表格自己算宽度。

避免横向滚动失效的三个常见坑

以下问题会导致 overflow-x: auto 形同虚设：


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 父容器或任何祖先元素设置了 white-space: nowrap，会强制子内容不换行，把表格拉得更宽
• 表格里有未限制宽度的图片或 iframe，它们默认按原始尺寸渲染，突破容器边界
• 用了 table-layout: fixed 却没给 <col> 或第一行 <th>/</th> <td> 设 <code>width，浏览器仍按内容撑开列宽

  要不要加 min-width: max-content？

  不用。给父容器设 min-width: max-content 会让它始终等于表格内容宽度，失去“收缩适配小屏”的意义；横向滚动的前提是容器宽度小于内容宽度，所以保持容器为 width: 100%（默认）即可。真正要控制的是内容——比如用 td, th { word-break: break-word; } 防止单词过长卡死滚动。