直接给table加overflow-x:auto无效，必须用设width:100%、overflow-x:auto、white-space:nowrap的div包裹table，并将table设为display:block和min-width:max-content。
直接给 table 加 overflow-x: auto 无效——滚动必须由外层容器控制，且该容器需有明确宽度约束和溢出声明。
为什么加了 overflow-x: auto 还没滚动条？
根本原因是浏览器没检测到“真实溢出”：要么父容器宽度未限制（如 width: auto），要么 table 被压缩或换行，导致内容没撑开。
- 外层
div必须设width: 100%或max-width: 100%，不能只靠overflow-x: auto -
table上禁用width: 100%，否则列宽被拉伸，掩盖真实宽度；改用min-width: max-content或width: max-content -
th、td要加white-space: nowrap，否则长文本自动折行，无法触发横向溢出 - 避免在滚动容器上用
transform、will-change或filter，这些会禁用原生滚动加速
移动端 Safari 滚动卡顿或拖不动怎么办？
iOS Safari 对非 body 级别的 overflow-x: auto 容器支持较弱，尤其在微信内置浏览器或旧版 WebView 中。
- 必须给外层容器加
-webkit-overflow-scrolling: touch，仅对该容器启用（不要全局加） - 该属性只在
overflow-x为auto或scroll时生效，hidden无效 - 现代 iOS（16+）已弱化此限制，但为兼容 iOS 15 及更早版本，仍建议保留
- 若容器嵌套在
flex布局中，确保父级未设flex-shrink: 0干扰宽度计算
如何固定首列同时支持横向滚动？
用 position: sticky 是最轻量的方案，但对结构和样式有硬性要求。
立即学习“前端免费学习笔记（深入）”；
- 固定列（如
th.fixed、td.fixed）必须设left: 0和background-color（防滚动时内容透出） - 外层容器不能是
overflow: hidden，否则截断 sticky 效果 -
table推荐设table-layout: fixed，配合min-width控制列宽，避免某列（如图片、URL）无限撑宽 - 不要对
thead单独套滚动容器——会导致表头与内容不同步
真正容易被忽略的是：表格语义结构（thead/tbody）本身不影响滚动行为，但会影响可访问性和 JS 行为；如果后续要加合计行或排序，滚动容器的 DOM 层级必须保持干净，否则像 Element Plus 这类组件会把滚动条插错位置。
