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