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