直接给加overflow-x-auto无效，因其默认display:table不响应overflow属性；必须用块级包裹并设overflow-x:auto、width:100%等样式，且需配合table-layout:fixed和white-space:nowrap等约束。
直接用 overflow-x-auto 包裹 table 是最可靠方案，但必须套在块级容器里——加在 <table> 标签上完全无效。
<h3>为什么 <code>overflow-x-auto 加在 <table> 上没用？
<p><code><table> 默认是 <code>display: table，不响应 overflow；它既不是块级元素，也不创建新的层叠上下文或滚动上下文。
- 错误写法：
<table class="overflow-x-auto"> → 滚动条永不出现 <li>正确结构：外层用 <code><div class="overflow-x-auto">，里面放 <code><table> <li>旧版 Tailwind（v3.2 及更早）需显式加 <code>block类；v3.3+ 默认已含，但若项目未升级，仍要写class="overflow-x-auto block" -
table-fixed：列宽由第一行<th> 或 <code><col>决定，渲染快、滚动顺，适合长文本/代码字段；需搭配w-full或显式min-w-0防撑破容器 -
table-auto：列宽随内容伸缩，小屏下某列突然塞进一串 URL，整行会“弹开”，导致滚动条跳动 - 若表格含
<pre class="brush:php;toolbar:false;"></pre>、<code>或未限制宽度的图片，table-fixed更能约束溢出 - 必须加
touch-pan-x（Tailwind v3.3+），否则 iOS Safari / 安卓 WebView 默认禁用水平拖拽 - React/Vue 中表格重渲染时，
scrollLeft会被重置 → 用 ref 缓存值，useEffect或onUpdated里setTimeout(() => el.scrollLeft = lastPos, 0) - 避免给容器设
transform或will-change，否则position: sticky表头在 Safari 下失效 - 慎用自定义 scrollbar 或
scroll-snap-x：部分安卓 WebView 不支持，且掩盖原生惯性滚动 - 仅 Chrome/Firefox 稳定；Safari 15.4+ 才支持，且父容器不能是
transform触发的层叠上下文 - 必须写：
<thead class="sticky top-0 bg-white z-10">，<code>z-10防被其他元素遮盖 - 更稳做法：拆成两个容器 —— 固定高度的
<div> 放 <code><thead>，下面 <code><div class="max-h-96 overflow-y-auto"> 放 <code><tbody>，再用 <code>table-layout: fixed对齐列宽 - 如果用了
whitespace-nowrap，记得配合text-sm或px-2压窄内边距，否则表头本身就会溢出
table-fixed 和 table-auto 怎么选？
列宽是否可控，决定滚动是否稳定。后台表格、固定字段数场景强烈推荐 table-fixed。
移动端滚动卡顿、拖不动、重绘后跳回左上角？
这不是类名漏写的问题，而是触摸行为和 DOM 重绘共同触发的底层行为。
表头固定（sticky header）为什么有时不生效？
不是所有浏览器都支持 <thead> 上的 <code>sticky，且依赖严格条件。
真正难的不是加几个类，而是表格内容是否“守规矩”：后端返回的 Markdown 表格、嵌套 <div>、没加 <code>max-w-full 的图片，都会绕过 overflow-x-auto 的保护——这些得单独处理，不是容器的事。
