移动端表格横向滚动需用overflow-x: auto容器包裹table，设white-space: nowrap、min-width: fit-content，并为iOS加-webkit-overflow-scrolling: touch及明确高度。
表格内容超出屏幕时直接横向滚动
移动端浏览器默认不会让 <table> 自动触发横向滚动，哪怕内容明显溢出。根本原因是 table 的渲染行为会撑开父容器，而父容器又没被设为可滚动区域。
最直接有效的解法：用一个带固定宽高、overflow-x: auto 的容器包裹 <table>，并强制 table 不换行、不收缩：
-
white-space: nowrap加在<td>或<th>上，防止文本折行撑高行高 -
min-width: fit-content或min-width: max-content加在<table>上（部分旧 Android 浏览器需用min-width: 100%+display: block） - 容器必须设
overflow-x: auto且不能设overflow-y: hidden（否则 iOS Safari 会禁掉整个滚动）
iOS Safari 滚不动？检查 -webkit-overflow-scrolling
iOS Safari（尤其 iOS 12–15）对 overflow-x: auto 容器内的 <table> 有滚动卡顿或完全失效的问题，典型表现是手指划过去没反应，或只闪一下就回弹。
关键修复项只有这一条：给滚动容器加上 -webkit-overflow-scrolling: touch。注意它只对 overflow 同时含 x 或 y 有效，且必须配合明确的高度（不能是 height: auto）：
立即学习“前端免费学习笔记（深入）”；
- 容器需设
height或max-height（哪怕只是max-height: 50vh） - 避免同时设
overflow: scroll和overflow-x: auto—— iOS 会优先按scroll处理，忽略x方向单独控制 - 若表格行数少但列极多，建议加
scroll-behavior: smooth提升体验（仅现代浏览器支持）
固定表头 + 横向滚动的兼容写法
想让表头随横向滚动保持可见，又不想引入 JS 库？纯 CSS 方案在移动端限制很多，但有稳定路径：
- 把
<thead>单独抽出来，用position: sticky+top: 0，但必须确保其父容器是滚动容器本身（即<thead>和<tbody>同级，都在同一个overflow-x: auto容器内） -
<thead>的th必须设min-width或width，否则 sticky 后列宽会塌缩 - Android Chrome 支持良好；iOS Safari 需开启
-webkit-overflow-scrolling: touch才能触发 sticky 行为 - 别用
transform: translateX()模拟滚动——会破坏原生滚动惯性，且无法触发scroll事件
table-layout: fixed 能省事，但会丢内容
设 table-layout: fixed 确实能让表格快速适应容器宽度，但它会让所有列按 <col> 或首行 <th> 的宽度分配，**长文本会被截断或撑破单元格**，尤其在小屏上容易丢失关键信息。
除非你明确控制每列宽度（如用 <col width="120">），否则不建议在响应式表格中启用。更稳妥的做法是：
- 保留
table-layout: auto（默认值），靠white-space: nowrap+ 容器滚动兜底 - 对超长字段（如 ID、URL）加
text-overflow: ellipsis和overflow: hidden，但仅限非关键列 - 关键列（如姓名、状态）宁可横向滚动，也不截断
移动端表格滚动的本质不是“让表格变小”，而是“让容器接管滚动权”。任何试图靠缩放、font-size 调整来“适配”的方案，都会在不同设备上反复崩坏。真正可靠的，永远是明确的容器约束 + 原生 overflow 行为 + 针对 iOS 的 -webkit- 补丁。
