必须用包裹表格并设overflow-x:auto和-webkit-overflow-scrolling:touch，同时移除table{width:100%}、添加min-width:max-content及white-space:nowrap，否则表格会压缩折行而非触发滚动。

为什么 details 里的表格在手机上不滚动

直接把 <table> 塞进 <code><details></details>，默认不会触发横向滚动——因为表格本身会缩小字体、折行或溢出隐藏，而不是让容器产生 overflow-x: auto。关键不是 details 本身限制了什么，而是它的内容没被正确包裹和设限。

必须用 wrapper 套住表格并设宽限

手机端滚动的前提是：内部内容实际宽度 > 容器宽度，且容器明确允许横向溢出。单纯给 table 加 white-space: nowrap 不够，它仍可能被父元素压缩。正确做法是加一层 <div> 包裹，并锁定其行为： <pre class="brush:php;toolbar:false;">&lt;details&gt;&lt;summary&gt;数据表&lt;/summary&gt;&lt;div style=&quot;overflow-x: auto; -webkit-overflow-scrolling: touch;&quot;&gt; &lt;table&gt;...&lt;/table&gt; &lt;/div&gt; &lt;/details&gt;</pre> <ul> <li> <code>overflow-x: auto 是核心，缺它滚动条不会出现

-webkit-overflow-scrolling: touch 让 iOS 滚动更顺滑（非必需但推荐）

不要给 table 设 width: 100%，否则它会被拉伸填满，失去“超宽”特性

如果表格列多，建议加 table { min-width: max-content; }，强制按内容撑开

表格自身要防压缩和折行

即使 wrapper 设置了滚动，表格仍可能因 CSS 默认行为而变形。常见干扰项：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• table-layout: fixed 会让列宽被平均分配，破坏“靠内容定宽”，应改用 table-layout: auto（默认值）
• td, th 上若有 word-break: break-word 或 flex-wrap 类样式，会主动折行，需重置为 white-space: nowrap
• 避免在 td 内用 display: flex + flex-wrap，这会让单元格高度不可控，间接影响整体宽度计算

测试时容易忽略的兼容点

有些问题只在真机或特定 UA 下暴露：

• iOS Safari 对 <details></details> 的 open 状态动画有渲染延迟，刚展开时可能需要手动触发一次 resize 或 reflow（极少需处理，但若首次不滚动，可试 setTimeout(() => el.scrollWidth, 0)）
• Android Chrome 有时对嵌套 overflow 处理不稳定，确保 wrapper 的 display 是 block（默认就是，别改成 inline）
• 如果用了 CSS-in-JS 或框架（如 React），注意动态插入后 DOM 是否已就绪——wrapper 必须在 details 展开前就存在，否则滚动逻辑失效

表格横向滚动真正卡住的地方，往往不在 details，而在 wrapper 是否真正“拦住”了表格的自适应行为，以及有没有让浏览器明确知道：“这里的内容确实比屏幕宽，该出滚动条了”。