最可靠方案是用 overflow-x-auto 包裹 table 的块级容器，而非 table 本身；因 table 默认 display: table 不响应 overflow；需确保父容器为 block、禁用 transform/will-change，并配合 sticky 表头、touch-pan-x 及 scrollLeft 手动恢复。
直接用 overflow-x-auto 包裹 table 是最可靠方案，但必须加在块级容器上——给 table 本身加这个类完全无效。
为什么 overflow-x-auto 加在 table 上没反应？
浏览器对 table 元素的渲染逻辑很特殊：table 默认是 display: table，它不响应 overflow，也不接受 block 行为。哪怕你写了 class="overflow-x-auto"，CSS 引擎会忽略这个声明。
- ✅ 正确结构：外层用
<div class="overflow-x-auto"><table>...</table></div> - ❌ 错误写法：
<table class="overflow-x-auto">—— 白加 - ⚠️ 隐患：旧版 Tailwind（v3.2 及更早）中，
overflow-x-auto容器默认不是block，需显式加block类；v3.3+ 已内置，但项目若未升级，仍要补
如何让表头固定、内容可滚动？
纯 Tailwind + sticky 在 Safari 15.4+ 才稳定，且极易被父容器的 transform 或 will-change 破坏层叠上下文。
-
<thead>必须加sticky top-0 bg-white z-10，且父容器（即overflow-x-auto的div）不能有transform类（如scale-95）或will-change -
<tbody>建议加max-h-96 overflow-y-auto，否则整个表格高度仍由内容撑开，y 轴无法滚动 - 更稳做法：拆成两个独立容器，
<div class="sticky top-0"><table><thead>...</thead></table></div>+<div class="overflow-y-auto max-h-96"><table><tbody>...</tbody></table></div>，再用table-layout: fixed对齐列宽
移动端滚动卡顿、拖不动、重绘后跳回左上角怎么办？
这不是样式问题，而是行为控制缺失。iOS 和部分安卓 WebView 对 overflow-x-auto 的触摸支持较弱，且 React/Vue 中表格重渲染会重置 scrollLeft。
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-pan-x（Tailwind v3.3+），启用原生水平拖拽手势 - 避免在表格内部包裹
user-select: none或拦截touchmove的 wrapper，它们会吃掉滚动事件 - 滚动位置丢失：用
ref记录容器的scrollLeft，在组件更新前保存，更新后用setTimeout(() => el.scrollLeft = lastPos, 0)恢复 - 轻量替代：加
scroll-snap-type: x mandatory并配scroll-snap-align: start到th/td，但注意部分安卓 WebView 不支持
真正难的从来不是加几个类，而是内容是否可控——比如后端返回的长 URL、未限制宽度的图片、嵌套的 div 或 pre，它们会绕过容器的滚动保护，得单独处理 max-w-full 或 truncate。
