table-fixed 是固定列宽表格的默认首选，适用于列数固定、内容不可控的后台列表等场景，需显式设置列宽并配合 overflow-x-auto、touch-pan-x 及 whitespace-normal/truncate 防撑裂。
table-fixed 是数据表格的默认起点，不是可选项
后台列表、日志表格、API 响应展示这类列数固定、内容不可控的场景，table-fixed 应该是你的第一选择。它跳过浏览器对每列内容宽度的逐行测量，直接按首行 <th> 或 <col> 的宽度分配列宽——渲染快、滚动顺、不卡顿。
常见错误是看到长文本撑开列，就切回 table-auto，结果某列突然塞进一个无空格的 base64 字符串，整行宽度暴增，横向滚动条“跳动”，用户拖着拖着就断连。
- 必须显式控制列宽：用
class="w-1/4"或<col class="w-32">，别依赖首行文字长度（比如一列写“ID”，另一列写“X-Forwarded-For Header”） - 未设宽度的列会平分剩余空间，容易导致关键列被压缩
- 含
<textarea>、<pre>、JSON 字段的单元格，table-fixed能真正约束其宽度，避免撑破容器
overflow-x-auto 必须套在外部 div 上，不能加给 table
overflow-x-auto 对表格生效的前提，是它作用于一个块级容器，而不是 <table> 本身。因为 display: table 元素原生不支持横向滚动，加了也无效。
移动端真机上滑不动？大概率是漏了 touch-pan-x —— iOS Safari 和部分安卓 WebView 默认禁用非原生滚动区域的触摸拖拽，这个类本质是加 touch-action: pan-x，告诉浏览器“允许水平拖拽”。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确结构：
<div class="overflow-x-auto touch-pan-x"><table class="table-fixed w-full">...</table></div> - ❌ 错误写法：
<table class="overflow-x-auto">或<div class="overflow-x-auto"><table>...</table></div>（没加touch-pan-x） - 检查是否误加了
user-select: none或pointer-events: none到父容器，它们会拦截touchmove
whitespace-normal 和 truncate 不是装饰，是防爆裂安全带
table-fixed + w-full 后，如果单元格里有长 URL、base64、或连续无空格字符串，它们默认会 white-space: nowrap，强行撑破列宽——此时 whitespace-normal（换行）或 truncate（省略号）就是必须项。
-
truncate适合标题类字段（如用户名、状态标签），需配合block或inline-block使用 -
whitespace-normal更适合内容型字段（如描述、日志详情），允许自然换行 - 别只在
<th>加，<td>也要同步处理，否则首行看着正常，数据行照样撑开
复杂表格的真正难点不在样式，而在内容不可控性
你写了完美的 table-fixed + overflow-x-auto + touch-pan-x，但后端返回一个嵌套 <div> 的 Markdown 表格，或一张没加 max-w-full 的图片，滚动保护立刻失效。
这时候要单独处理“越狱内容”：
- 所有可能插入图片的地方，加
max-w-full和h-auto - 富文本字段用
prose-sm或自定义max-w-none+overflow-x-auto局部包裹 - JSON 字段建议用
<pre class="text-xs overflow-x-auto max-w-[200px]">控制宽度
最易被忽略的点：列宽控制和内容换行是两套独立机制，缺一不可；而移动端滚动行为，永远要以真机测试为准，模拟器会骗你。
