overflow-x-auto 必须包裹 table 而非直接加在 table 上，因 table 默认 display: table 不响应 overflow；需用 div 包裹并配合 table-fixed、touch-pan-x、max-w-full 等确保滚动生效。
overflow-x-auto 必须包裹 table，不能直接加在 table 上——这是最常翻车的第一步。
为什么直接给 table 加 overflow-x-auto 无效
浏览器中 table 默认是 display: table，它不响应 overflow 属性。CSS 规范明确要求：只有块级容器（如 div）才能触发横向滚动逻辑。加在 table 上的 overflow-x-auto 类会被忽略，控制台也几乎不报错，导致你反复检查却找不到原因。
- ✅ 正确写法：
<div class="overflow-x-auto"><table>...</table></div> - ❌ 错误写法：
<table class="overflow-x-auto">...</table> - ⚠️ 隐患：如果表格里有
<pre class="brush:php;toolbar:false;"></pre>、<code>或未设max-w-full的图片，它们会撑破容器宽度，绕过滚动保护
table-fixed vs table-auto：滚动是否“跟手”的关键
默认 table-layout: auto 会让浏览器逐列计算宽度，遇到长文本（比如 JSON 字段或无空格 URL）时，整行突然变宽，滚动条“跳动”明显；而 table-fixed 按首行或 <col> 定宽，渲染快、滚动顺滑，尤其适合后台数据表。
- 用
table-fixed时，务必搭配w-full和显式列宽控制，例如：<th class="w-1/4"> 或 <code><col class="w-32"> - 若列宽差异大且不确定内容长度，可用
table-auto+whitespace-normal+truncate组合，但要测试小屏下某列塞入长文本时是否意外拉宽整行 - 含
<textarea></textarea>或代码块的单元格，table-fixed更可靠——它能约束宽度，避免内容撑开 - 必须加
touch-pan-x（Tailwind v3.3+），启用原生水平拖拽手势 - 确保包裹容器没有
user-select: none或pointer-events: none，这些会拦截touchmove - 如果表格在 Flex 布局里，父级
flex容器可能压缩子项高度，导致滚动失效——加flex-shrink-0到包裹div上 - 真机测试不可省：Chrome DevTools 的模拟器无法复现 iOS Safari 的滚动惯性卡顿
- 对单元格内所有
<img>加max-w-full h-auto - 对可能含长 URL 或 JSON 的
<td>，加 <code>whitespace-normal break-all或truncate（注意truncate需配合block和固定宽度） - 若用了
table-fixed，但某列内容仍溢出，检查是否漏写了<col>或th的宽度类——table-fixed不会自动分配剩余空间
移动端滑不动？缺了 touch-pan-x 和高度约束
iOS Safari 和部分安卓 WebView 对 overflow-x-auto 的触摸支持极弱，光靠类名根本拖不动。这不是 Bug，而是浏览器对非标准滚动区域的保守策略。
内容不可控时，truncate 和 max-w-full 得手动补位
后端返回的 Markdown 表格、嵌套 <div>、未限制宽度的图片，都会绕过 <code>overflow-x-auto 的保护机制。容器再“聪明”，也管不住没受约束的子元素。
真正难的不是加 overflow-x-auto，而是确认每层内容都落在容器的裁剪边界内：从 div 包裹、到 table 布局、再到每个 td 里的内联元素，任意一环失控，滚动就成摆设。
