table-fixed 单独使用无效，必须配合 w-full、whitespace-normal/truncate 和外层 overflow-x-auto 容器才能生效；否则长文本会撑破列宽，导致布局失控。
table-fixed 为什么没生效
单独加 table-fixed 几乎没用，它依赖三个协同类才能真正约束列宽：必须同时有 w-full（让表格占满父容器）、whitespace-normal 或 truncate（防止长文本绕过宽度限制），以及外层 overflow-x-auto 容器（注意不是加在 <table> 上）。常见错误是只写 table-fixed，结果长 URL 或 JSON 字段直接撑破整列。
列宽被内容顶开的典型场景
当某列出现无空格长字符串（如 base64、API path、邮箱地址）时，table-layout: auto 默认会优先适配内容，导致该列暴增、其他列被压缩。这不是 bug，而是浏览器按内容重排的自然行为。
-
table-fixed能跳过全表测量，只读首行<th>或<col>的宽度，但前提是首行不能本身就不均衡（比如一列写 “ID”，另一列写 “User-Agent Header String”） - 推荐用
<col class="w-32">显式定义列宽，比依赖首行更可靠 - 未设宽度的列在
w-full+table-fixed下会平分剩余空间，容易导致关键列过窄
移动端滑不动还卡顿
iOS Safari 和部分安卓 WebView 默认禁用非原生滚动区域的触摸拖拽，光有 overflow-x-auto 在真机上大概率滑不动——这不是样式失效，是浏览器策略。
- 必须加
touch-pan-x到外层容器（Tailwind v3.3+ 支持），本质是注入touch-action: pan-x - 检查是否误加了
user-select: none或pointer-events: none到表格或其父级，它们会直接拦截拖拽事件 - 滚动卡顿常因未设
whitespace-normal，导致长文本强制单行渲染，触发频繁重排
表格样式不统一怎么覆盖
Tailwind 默认不生成表格工具类，Bootstrap 5 又移除了 .table-bordered 对 <thead> 的默认边框——旧文档示例还在用，容易误导。
立即学习“前端免费学习笔记（深入）”；
- 不要用
!important全局覆盖，优先给表格加自定义 class（如data-table），再针对性重置：table.data-table th, table.data-table td { padding: 0.375rem 0.75rem; border: 1px solid #dee2e6; } - 动态插入的表格（如富文本输出）可用属性选择器兜底：
table[contenteditable="true"] th, table[contenteditable="true"] td { vertical-align: top; } - 若用 Tailwind 扩展表格类，需在
tailwind.config.js的theme.extend中手动注册
最易被忽略的是：列宽失控往往不是某个 class 写错了，而是 table-fixed 缺少 w-full 导致计算失准，或者外层容器没加 overflow-x-auto 让浏览器根本无法启用横向滚动逻辑。
