table-fixed单独使用无效，必须配合w-full、whitespace-normal/truncate及外层overflow-x-auto容器才能约束列宽；否则长文本会撑破列宽导致布局失控。
table-fixed 单独用根本压不住列宽
单独加 table-fixed 几乎没效果，它不是开关，而是依赖三个协同条件才能真正起作用：必须同时有 w-full（让表格占满父容器）、whitespace-normal 或 truncate（防长文本单行撑开）、以及外层 overflow-x-auto 容器（注意不是加在 <table> 上）。常见错误是只写 <code>table-fixed，结果一个 base64 字符串或 API path 直接把整列顶宽，其他列被挤成一条线。
列宽错位是因为 thead 和 tbody 各算各的
即使用了 table-fixed，如果没给 <th> 和对应 <code><td> 设一致宽度（比如都加 <code>w-32 或 min-w-[120px]），浏览器仍会分别测量 <thead> 和 <code><tbody> 的内容，导致滚动时列头和数据列对不齐。更关键的是：<code><th> 必须带 <code>bg-white 和 z-10，否则滚动瞬间会透出下面的 <td> 边框或背景色。
<h3>用 <code><colgroup></colgroup> 比靠首行更稳
依赖第一行 <th> 的文字长度来定列宽，风险很高——“ID” 和 “X-Forwarded-For Header Value” 差距太大，计算必然失衡。推荐显式用 <code><colgroup></colgroup> 定义：
<colgroup> <col class="w-20"> <col class="w-64"> <col class="min-w-[120px]"> </colgroup>
这样列宽完全可控，不受首行内容干扰；未设宽度的列在 w-full + table-fixed 下会平分剩余空间，容易让关键列过窄，所以宁可显式写死或用 min-w-。
移动端横向滚动滑不动？不是样式问题，是浏览器策略
iOS Safari 和部分安卓 WebView 默认禁用非原生滚动区域的触摸拖拽，光有 overflow-x-auto 在真机上大概率无响应。必须加 touch-pan-x（Tailwind v3.3+）或手写 -webkit-overflow-scrolling: touch。另外检查是否误加了 pointer-events: none 或 user-select: none 到表格或其父级，它们会直接拦截拖拽事件。滚动卡顿还常因漏了 whitespace-normal，导致长文本强制单行渲染，触发频繁重排。
最易被忽略的点：列宽失控往往不是某个 class 写错了，而是 table-fixed 缺了 w-full 导致列宽计算失准，或者外层容器没加 overflow-x-auto —— 浏览器根本没启用横向滚动逻辑，自然谈不上约束列宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
