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