table-layout: auto列宽差异源于浏览器对“逐行扫描+换行判定”逻辑不一致，并非bug；Chrome将英文视为1行，Safari可能断为2行，Firefox按单词切分，导致同一列最大内容宽度偏差超30px。
table-layout: auto 的列宽差异来自内容扫描逻辑不一致
不是 bug，是浏览器对「逐行扫描+换行判定」的实现不同。Chrome 把一串英文当 1 行，Safari 可能按字符断成 2 行，Firefox 又按单词边界切——结果同一列在三端算出的最大内容宽度差 30px+。这个过程发生在整个表格 DOM 加载完之后，且无法干预。
table-layout: fixed 没生效，其实是悄悄回退到了 auto
它不是开关，而是一组必须同时满足的条件。漏掉任意一条，浏览器就自动降级：
-
table元素没设width（比如只写了table-layout: fixed，但没width: 100%或width: 800px） - 列宽定义没落在第一行
<th>/</th> <td> 或 <code><colgroup></colgroup>中，而是写在第二行或<tbody> 里 <li><code><th> 或 <code><td> 上混用了 <code>min-width或max-width，尤其 Firefox 会直接覆盖百分比计算colgroup 是唯一跨浏览器可靠的列宽声明方式
用
<colgroup></colgroup>+<col>定义列宽，能绕过“第一行依赖”和“渲染顺序干扰”，所有现代浏览器（包括 Android WebView 和 Safari 15.4+）都严格遵循其width值：<table style="width: 100%; table-layout: fixed;"> <colgroup> <col style="width: 60%"> <col style="width: 20%"> <col style="width: 20%"> </colgroup> <thead><tr><th>标题</th><th>状态</th><th>操作</th></tr></thead> </table>注意：
<col>必须出现在<thead> 或 <code><tbody> 之前；<code>fr单位无效，只认px、%、auto；IE8– 只认 HTMLwidth属性（如<col width="120">），不认 CSSstyle。立即学习“前端免费学习笔记（深入）”；
动态更新内容后列宽不重算，不是浏览器卡了
table-layout: fixed只在首次渲染时读取第一行或<col>的宽度，后续 JS 插入新行、修改文本、切换 tab 都不会触发重读。这是最隐蔽的坑：- 别调
table.redraw()（不存在） - 安全做法是强制重取宽：
table.style.width = table.offsetWidth + 'px' - 用 Layui/Element Plus 等框架时，
table.reload()后必须紧跟table.resize()（Layui 2.8+）或手动重建固定列逻辑
<thead> 为第一行，有的以首个渲染的 <code><tr> 为准，还有的把 <code>visibility: hidden的行当有效行、却跳过display: none的——所以永远别让列宽依赖空单元格或动态生成的第一行。 - 别调
