移动端 display: table 失效因强制拉伸容器宽度，使 overflow-x: auto 无法触发；应改用 display: block/inline-block、table-layout: fixed 或 display: grid，并注意 white-space、min-width 和 -webkit-overflow-scrolling 等细节。
移动端表格内容溢出时，display: table 为什么失效
因为 display: table 及其子元素（table-row、table-cell）在移动端会强制拉伸容器宽度，无视 overflow-x: auto；哪怕父容器设了 width: 100% 和 overflow-x: scroll，内部单元格仍会撑开整行，导致横向滚动无法触发。
常见错误现象：overflow-x: auto 不生效、页面整体被拉宽、出现水平滚动条但拖不动表格内容。
- 必须用
display: block或display: inline-block替代display: table的外层容器，让 overflow 生效 -
table-cell类元素需配合white-space: nowrap+min-width: 0防止文本撑宽 - 若保留语义化
<table> 标签，得用 <code>table-layout: fixed+ 显式设置width或max-width用
display: grid替代display: table更可控Grid 天然支持列宽约束和滚动容器嵌套，比 table 模式更适配移动端复杂表头+多列+可展开行的场景。
使用场景：带冻结首列、动态列宽、响应式列数切换（如从 8 列缩为 4 列）、或需 JS 控制某列显隐的表格。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: grid+grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))实现自适应列 - 每行用
display: contents或直接扁平化为div，避免嵌套 table 带来的渲染限制 - 固定表头需分离
<thead> 和 <code><tbody>，并给 <code><tbody> 单独设 <code>max-height+overflow-y: autooverflow-x: auto容器里，表格内容被截断或错位根本原因是子元素未脱离文档流或未正确处理 white-space / flex-shrink / min-width，导致浏览器无法准确计算滚动边界。
性能影响：错误的
width计算会触发多次 layout，尤其在 iOS Safari 中更明显。- 滚动容器必须设
width: 100%（不能只靠max-width）且不设white-space: nowrap在容器上 - 每个单元格加
flex-shrink: 0（若用 flex）或min-width: 0（若用 grid/table-cell） - 避免在单元格内用
width: 100%或position: absolute，这会让尺寸脱离滚动上下文 - iOS Safari 下需额外加
-webkit-overflow-scrolling: touch提升滚动流畅度
兼容性底线：哪些老版本必须绕开
display: gridAndroid 4.4（WebView）和 iOS 9 以下不支持
grid-template-areas和部分auto-fit行为，但基础grid+fr单位在 iOS 10.3+、Android 5.0+ 是可用的。容易被忽略的地方：即使加了
@supports (display: grid)，也要注意subgrid和gap在旧版中缺失，别依赖它们做关键布局。- 兼容方案优先用
display: flex+flex-wrap: nowrap+overflow-x: auto搭配固定列宽 - 对 Android 4.4，放弃 CSS 网格，改用 JavaScript 计算列宽 +
transform: translateX()模拟滚动 - 所有方案都必须测试真机上的 touchstart/touchmove 延迟，iOS 有时会因
overflow容器未设height而禁用惯性滚动
- 滚动容器必须设
- 外层容器设
