直接给table加overflow-x:auto无效，因其是内容驱动宽度的独立格式化上下文，会无视自身overflow并不断撑宽；必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的div包裹，并配white-space:nowrap、min-width:max-content等样式协同控制。
为什么直接给 table 加 overflow-x: auto 没反应
浏览器压根不把 table 当作可滚动容器——它默认是「内容驱动宽度」的独立格式化上下文，会不断撑宽自己来塞下所有列，根本不会触发溢出逻辑。滚动行为必须由它的父级 <div> 控制，且这个 <code><div> 得有明确宽度边界，否则 <code>overflow-x 就是摆设。
.table-container 必须配齐这三样才真能滑
缺一不可，尤其在 iOS Safari 和微信内置浏览器里：
-
width: 100%（或具体像素值），不能只靠max-width；如果父级是display: flex，还得加min-width: 0，否则它拒绝收缩 -
overflow-x: auto，别同时写overflow-y: hidden，某些安卓 WebView 会意外截断表格高度 -
-webkit-overflow-scrolling: touch，没有它，iOS 上就是“一拖就停”，毫无惯性
还要避开几个高危干扰项：transform、will-change、overscroll-behavior: contain —— 它们会劫持或拦截滚动事件，删掉最省心。
table 本身怎么避免“假装溢出”
常见现象：滚动条出现了，但拖不动内容。本质是表格没真正撑出容器，浏览器判断“没溢出”。关键操作：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
table { width: 100% }，换成min-width: max-content（最稳）或min-width: fit-content -
th和td统一加white-space: nowrap，防止长文本换行压缩列宽，破坏宽度计算 - 若某列含图片或
<input>，额外约束：img { max-width: 100%; height: auto; }，input { width: 100%; box-sizing: border-box; }
要不要用 table-layout: fixed？不是必须，但能防列宽失控；启用后优先用像素值（如 width: 120px），Safari 对百分比支持不稳定。
横向滚动卡顿、黑边、拖不动的定位线索
不是代码写错，而是渲染链路被卡住：
- “黑边”大概率是某个元素实际宽度 >
100vw，用 Chrome DevTools → Rendering → “Highlight overflows” 快速定位 - 控制台执行
console.log(document.body.scrollWidth, window.innerWidth)，差值 > 1 就确认存在横向溢出 - 重点排查：
ml-*/mr-*类、w-[500px]这类固定宽、flex-shrink-0却没配min-w-0的元素 - 滚动必须落在“最靠近溢出源”的容器上，堆在
或全局 wrapper 上基本无效
最易被忽略的是：移动端侧边栏或抽屉若只是内部 <div> 设 <code>fixed，外层仍参与文档流，会悄悄撑高 ，导致底部多出滚动条——把 fixed 直接加到根元素上，问题立解。
