移动端表格横向滚动不生效，因table默认为独立格式化上下文且自动撑宽，overflow-x:auto必须加在外层div容器上，并设width:100%、min-width:fit-content、-webkit-overflow-scrolling:touch，同时table需设table-layout:fixed和th/td加white-space:nowrap。
移动端表格横向滚动不生效，容器设置对了吗？
overflow-x: auto 必须加在外层 div 容器上，不是 table 本身。因为 table 默认是块级但会自动撑宽，滚动行为无法作用于它自身。
- 外层
div必须有明确宽度（如width: 100%或max-width: 100vw），否则滚动无触发前提 - 加
-webkit-overflow-scrolling: touch，否则 iOS Safari 滚动卡顿、拖不动或一松手就回弹 - 避免父元素用
display: flex直接包裹该容器——flex 会压缩子项，导致宽度计算失效；必要时加flex-shrink: 0或改用display: block - 如果用了
transform、will-change或overscroll-behavior: contain，滚动事件可能被拦截，需检查并移除
固定表头后列宽错位，position: sticky 怎么写才对齐？
position: sticky 是目前最轻量、语义正确的方案，但容易因祖先节点干扰而失效。
-
thead th和tbody td:first-child都要设position: sticky，分别配top: 0和left: 0 - 必须保证
th和对应td的宽度一致：推荐用table-layout: fixed+ 显式设置th/td的width或min-width - 不要给
thead或tbody设display: block—— 这会破坏原生表格列对齐逻辑，sticky在标准结构下完全可用 - 若某列含图片或长文本没约束宽度（比如没设
max-width或word-break: break-word），整行仍会被撑开，滚动失效
固定首列+固定表头+横向滚动三者共存时，z-index 和层级怎么调？
z-index 不是可有可无的装饰，而是决定视觉遮盖顺序的关键。
-
thead th建议z-index: 10，tbody td:first-child建议z-index: 20，确保首列覆盖表头左上角重叠区 - 所有
sticky元素必须有非auto的z-index，否则在部分安卓 WebView 中会降级为普通定位 - 避免在
sticky元素上设background: transparent—— iOS Safari 下透明背景可能导致粘性失效，建议用background-color: #fff或与主题一致的实色 - 如果表格嵌在 modal 或其他
position: relative容器中，确认该容器没设overflow: hidden，否则会裁剪掉 sticky 区域
为什么 Safari 里滚动条不显示，或者只在 hover 时出现？
这不是 bug，是 WebKit 渲染策略：滚动条默认隐藏，且仅在用户交互时短暂浮现。
- 不要依赖滚动条可见性做功能判断；用
overflow-x: auto+ 实际内容溢出即可触发滚动能力 - 若需强制显示（调试用），可加
::-webkit-scrollbar { width: 8px; }，但生产环境不建议 - 更关键的是：确保容器有高度限制（如
max-height: 400px）且内容真实超出——空格、换行符、未设white-space: nowrap都会导致宽度计算错误，从而“看起来没溢出” -
white-space: nowrap要加在td和th上，不是外层div；否则文字换行会压缩列宽，让表格变矮变窄，滚动条件不成立
实际中最容易被忽略的，是列内容本身的宽度控制。哪怕所有 CSS 都写对了，只要一列里塞了个没约束的 img 或长链接，整个横向滚动逻辑就会崩掉。先锁死每列的 min-width 和 max-width，再谈 sticky 和 overflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
