表格横向滚动失效的根本原因是table默认撑宽且未脱离渲染流，需外层容器设overflow-x:auto和white-space:nowrap，table设display:block及min-width:max-content，并为ios加-webkit-overflow-scrolling:touch。
表格内容超出容器时横向滚动不生效？
直接给 <table> 加 <code>overflow-x: auto 没用——因为表格默认是「内联块级行为」，会撑开父容器，根本不会触发滚动。必须切断表格的自然换行和溢出传播逻辑。
关键在两层包裹：外层设 overflow-x: auto，内层用 display: block 强制表格脱离表格渲染流。
- 外层容器（如
<div>）必须设 <code>overflow-x: auto且white-space: nowrap（防内部换行干扰宽度计算） - 表格本身加
display: block，否则浏览器仍按表格布局算法计算宽度，忽略父容器约束 - 可选：加
min-width: max-content确保表格最小宽度等于所有列内容总宽，避免滚动条被“压缩掉” - 必须给滚动容器加
-webkit-overflow-scrolling: touch（iOS 15+ 已弃用但仍有影响，建议保留） - 避免在
<td> 或 <code><th> 内使用 <code>flex布局或绝对定位——它们会干扰滚动区域检测 - 如果用了
position: sticky表头，确保其父<thead> 不被设为 <code>display: block，否则 sticky 失效；推荐把 sticky 应用在<th> 上，并配合 <code>top: 0和background如何让表头固定、内容可滚动？
纯 CSS 实现固定表头 + 横向滚动，不能靠
<thead> 自带行为，得拆成两个独立表格或用伪元素模拟。 <ul><li>最稳方案：用两个 <code><table>，一个只放 <code><thead>（设 <code>position: sticky; top: 0; z-index: 1），另一个放<tbody>（设 <code>display: block; max-height: 300px; overflow-y: auto） - 注意列宽对齐：给每列
<th> 和 <code><td> 设相同 <code>width或min-width，否则滚动后错位 - 别用
table-layout: fixed配合百分比宽度——它会让列宽强制均分，破坏内容自适应 - 监听窗口 resize 和表格内容变化，用
getBoundingClientRect()获取每列<th> 宽度，再赋给对应 <code><td> 的 <code>min-width - 避免高频重排：用
ResizeObserver替代window.onresize，只监听表格容器尺寸变化 - 简单场景可用
document.querySelector('table').offsetWidth判断是否溢出，再显隐滚动条容器
移动端 Safari 滚动卡顿或无法拖拽？
iOS Safari 对 overflow 容器内的滚动有严格限制，尤其当表格含大量单元格或用了 position: sticky 表头时，容易失灵。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 JavaScript 补齐兼容性或动态列宽？
当列宽由内容动态决定（比如中英文混排、长 URL），CSS 很难精确对齐表头与内容，此时需 JS 辅助测量。
横向滚动不是“加个 overflow 就完事”的功能，真正卡点在于表格渲染模型和移动端滚动机制的冲突。列宽对齐、sticky 行为、iOS 滚动策略这三处，漏掉任一都可能让滚动失效或体验断裂。
