加了overflow-x:auto却没滚动条或拖不动，根本原因是table默认撑满父容器且单元格有最小宽度约束；需为父容器设明确宽高、table加display:block、禁用width:100%，并统一th/td列宽、处理ios touch滚动兼容性。
加了 overflow-x: auto 却没滚动条，或者有滚动条但拖不动——这不是 CSS 写错了，而是表格默认行为在“拦路”。核心解决点就三个：父容器要收束、table 要脱离表格渲染流、列宽不能靠百分比硬撑。
为什么 overflow-x: auto 对 table 失效
浏览器把 table 当作一个「格式化上下文」，它会无视父容器的 overflow 设置，强行按内容撑开宽度。哪怕你写了 width: 100%，它也会优先满足内部单元格的最小宽度（比如文字不换行时的自然宽度），导致父容器根本“感觉不到”溢出。
- 必须给父容器（比如
<div class="table-wrapper">）设明确的 <code>width或max-width，不能只靠overflow-x: auto -
table必须加display: block，否则它永远不响应外部 overflow 控制 - 禁用
table { width: 100% }—— 这会让它反向拉伸去填满父容器，彻底失去“溢出”前提 - 给每个
th和对应位置的td设置相同的width或min-width（例如width: 160px），不能混用百分比和像素 - 避免
table-layout: fixed+ 百分比宽度——小屏下会被压缩到文字挤成一团，且不同设备缩放行为不一致 - 内容过长时，优先用
white-space: nowrap; text-overflow: ellipsis; overflow: hidden截断，而不是靠拉宽列来硬扛 - 加
-webkit-overflow-scrolling: touch到父容器，能显著改善 iOS 上的触控响应 - 确保父容器有明确高度（比如
height: 400px），否则部分安卓 WebView 也会拒绝启用横向 touch 滚动 - 如果滚动仍不顺滑，可尝试给
table加will-change: transform触发硬件加速（但别滥用，可能引发重绘问题）
table { display: block } 后表头错位怎么办
一旦 table 变成块级元素，thead 和 tbody 就脱离了表格布局逻辑，各列不再自动对齐。最稳的解法不是靠 table-layout: fixed，而是显式控制列宽。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
iOS Safari 横向滚动卡顿或需双指才能拖
iOS WebKit 对 overflow-x: auto 的 touch 支持长期残缺，默认只响应垂直滚动。单指横向拖动经常没反应，或滚动不跟手。
真正难的不是让表格滚起来，而是滚起来之后表头还对得齐、文字还看得清、手指一划就走。这些细节里藏着最多“咦？怎么又不对了”的时刻，尤其是列宽没统一对齐、或者忘了关掉 width: 100% 的时候。
