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

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

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

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

手机端滚动的前提是：内部内容实际宽度 > 容器宽度，且容器明确允许横向溢出。单纯给 table 加 white-space: nowrap 不够，它仍可能被父元素压缩。正确做法是加一层 <div> 包裹，并锁定其行为：

<details>
  <summary>数据表</summary>
  <div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
    <table>...</table>
  </div>
</details>

• overflow-x: auto 是核心，缺它滚动条不会出现
• -webkit-overflow-scrolling: touch 让 iOS 滚动更顺滑（非必需但推荐）
• 不要给 table 设 width: 100%，否则它会被拉伸填满，失去“超宽”特性
• 如果表格列多，建议加 table { min-width: max-content; }，强制按内容撑开

表格自身要防压缩和折行

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

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