移动端表格滚动需外层容器设 overflow-x: auto 和 white-space: nowrap，且 table 必须设 display: block 才生效；iOS Safari 需加 -webkit-overflow-scrolling: touch；table-layout: fixed 需 width: 100%、显式列宽及兼容父容器布局。
移动端表格滚动不是加个 overflow-x: auto 就完事——它必须切断表格默认的渲染流，否则滚动条永远不会出现。
为什么直接给 <table> 加 overflow-x: auto 没用
浏览器把 <table> 当作一个「有内在尺寸约束」的替换元素，它会主动撑开父容器，根本不会触发溢出逻辑。你看到的“没滚动条”，其实是表格压根没被限制宽度。
- 外层容器（如
<div class="table-container">）必须设overflow-x: auto和white-space: nowrap（后者防内部换行干扰宽度计算） -
<table>本身必须加display: block，否则仍走表格布局算法，无视父容器约束 - 可选但强烈建议：加
min-width: max-content，确保表格最小宽度 = 所有列内容自然宽度之和，避免滚动条“消失” - iOS Safari 需额外加
-webkit-overflow-scrolling: touch，否则拖拽卡顿或失灵（iOS 15+ 已弃用但仍有兼容影响）
table-layout: fixed 生效的三个硬性前提
这个属性常被误认为“让表格变响应式”，其实它只是强制列宽按设定值分配——前提是所有配套条件都满足，否则等于没写。
-
<table>上必须显式声明width: 100%（只写在父容器上不触发 fixed 逻辑） - 每列必须有明确宽度来源：要么
<col width="25%">，要么<th style="width: 25%">；空着就退化为auto布局 - 如果父容器是
flex或grid，width: 100%可能被忽略，得给父容器加max-width: 100vw或display: block - Outlook（用 Word 渲染引擎）完全不支持
table-layout: fixed，邮件中慎用
表头固定 + 滚动内容的纯 CSS 实现要点
不能依赖 <thead> 自带 sticky 行为——它在 display: block 的表格里直接失效。得拆开处理。
立即学习“前端免费学习笔记（深入）”；
- 把
<thead>单独抽成一个<table>，设position: sticky; top: 0; z-index: 1 -
<tbody>放进另一个<table>，并设display: block; max-height: 300px; overflow-y: auto - 列宽对齐靠显式控制：给每个
<th>和对应列的<td>设相同min-width或width，百分比宽度 +table-layout: fixed容易错位 - 避免在
<td>里用flex或position: absolute，它们会破坏滚动区域检测
列数 ≥ 4 时，优先用 data-label 转卡片
横向滚动不是万能解——用户要的是信息可读，不是滑来滑去。当列太多，不如放弃表格形态。
- 给每个
<td>加data-label属性，如<td data-label="下单时间">2026-04-24 10:30</td> - 用 CSS 把
<tr>设为display: block，<td>设为display: block，再用::before伪元素读取data-label显示标题 - 隐藏原
<thead>，视觉上变成每行一条垂直卡片，小屏阅读路径更自然 - 这种方案不依赖 JS，无滚动性能问题，也绕开了 Outlook 兼容雷区
最常被忽略的一点：滚动容器的 white-space: nowrap 和表格的 display: block 必须同时存在，缺一不可。少一个，滚动就静默失效——不是 bug，是 CSS 渲染流没被真正切断。
