为使表格支持横向滚动，必须用div包裹table并设overflow-x:auto，且div需设width:100%和min-width:max-content；ios需加-webkit-overflow-scrolling:touch；避免transform等干扰滚动的属性。
给 table 外层 div 加 overflow-x: auto 才有效
直接对 table 元素设置 overflow-x: auto 没用——它会自动撑宽，父容器不设限就永远不触发滚动。必须用一个 div 包裹 table，并在这个 div 上启用横向溢出控制。
常见错误现象：table 把整个页面撑开、滚动条不出现、iOS 上能滑但没惯性、安卓 WebView 里拖不动。
-
.table-container必须设width: 100%（或具体值），不能依赖 flex 压缩或百分比计算失效 - 避免父元素有
display: flex或display: table，否则可能截断滚动行为 - 不要给
table设width: 100%，否则列会被强制压缩，文字换行混乱 - 移动端 Safari 需要额外加
-webkit-overflow-scrolling: touch激活原生滚动惯性
min-width: max-content 是防止列被压扁的关键
table 默认按内容自适应宽度，但一旦父容器设了 width: 100%，又没告诉它“至少要多宽”，它就会妥协缩列。用 min-width: max-content 明确告诉浏览器：这个表格最小也要容纳所有内容的自然宽度。
相比 white-space: nowrap（容易导致单行长文本撑爆）或 table-layout: fixed（需手动设列宽，维护成本高），min-width: max-content 更稳妥、语义清晰、无需改 HTML 结构。
- 兼容性良好（Chrome 62+、Firefox 63+、Safari 12.1+，覆盖当前所有主流移动浏览器）
- 配合
width: max-content可进一步强化“不压缩”行为（部分旧版 Safari 需 fallback） - 如果表格含图片或
input等不可收缩元素，仍需单独约束其宽度，否则仍会撑宽
iOS Safari 滚动卡顿或无法拖拽的真实原因
不是 CSS 写错了，而是 Safari 对非 body 元素的触控滚动做了保守处理。哪怕样式全对，只要滚动容器上叠加了某些属性，就可能让 touchstart/touchmove 事件失灵。
- 禁用
transform、will-change、filter等触发合成层的属性——它们会干扰滚动事件捕获 - 检查父级是否用了
overscroll-behavior: contain，它会拦截滚动传递，需移除或改为auto - 避免在
.table-container上同时设height和overflow-y: hidden，可能触发渲染 bug - 微信内置浏览器（基于 WKWebView）同样受此限制，不能只测 Safari 就认为 OK
小屏下字体和内边距微调不能省
横向滚动只是保底方案，不代表体验完整。当用户滑到最右侧，如果 td 内边距太小、字体太密，依然难读难点。
- 在
@media (max-width: 480px)下，把padding改为6px 8px，font-size调至14px是较稳妥的起点 - 避免用
transform: scale()缩放整个表格——文字模糊、点击热区偏移、缩放后高度计算异常 - 如果表格列数过多（比如 >8 列），横向滚动已不是最优解，应考虑卡片式布局或列折叠交互，CSS 滚动只是兜底手段
真正麻烦的从来不是写几行 CSS，而是滚动容器和表格之间那层隐性的宽度契约：你得明确告诉浏览器“这里该停在哪”，而不是指望它猜。很多问题其实出在父容器没设宽、table 被强设了 100%、或者忘了 iOS 那个带前缀的属性——它们不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
