table-layout: fixed 列宽不一致的根本原因不是 bug，而是浏览器在 auto 模式下对换行判定逻辑不同；其生效必须同时满足：table 有明确 width、列宽定义在第一行或 colgroup 中、且不混用 min/max-width。
table-layout: fixed 为什么在 Chrome/Firefox/Safari 中列宽不一致
根本原因不是 bug，而是 table-layout: auto 模式下浏览器各自实现「逐行扫描+换行判定」逻辑不同——Safari 把“测试文本”算成 2 行，Chrome 算成 1 行，导致列宽偏差常达 30px+。table-layout: fixed 能规避这点，但前提是它真被启用；一旦漏掉任一必要条件，浏览器就悄悄回退到 auto，列宽差异照旧。
必须同时满足的三个生效条件
table-layout: fixed 不是开关，而是一组协同规则。漏掉任意一条，它就失效：
-
table元素必须有明确的width（如width: 100%或width: 800px），否则无参照基准，列宽仍由内容驱动 - 列宽定义必须落在第一行的
<th>/<td>上，或更稳妥地用<colgroup><col>——table-layout: fixed只读第一行，后续行的width全部被忽略 - 不能在
<th>/<td>上混用min-width或max-width，尤其 Firefox 中它们会覆盖百分比计算，优先级异常高
colgroup 是跨浏览器最稳的列宽定义方式
直接给第一行单元格写 style="width: 30%" 看似简单，但在 Android WebView 或旧版 Safari 中，若混用像素和百分比（比如一列 120px、一列 30%），整张表可能降级回 auto。用 <colgroup> 则没这问题：
<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>
<tbody>...</tbody>
</table>
<col> 的 width 在所有现代浏览器中都被严格遵循，且不依赖 DOM 渲染顺序，也不受 colspan 干扰。
立即学习“前端免费学习笔记（深入）”；
动态更新内容后列宽不重算怎么办
JS 插入新行、修改单元格文本后，table-layout: fixed 不会自动重读第一行宽度——浏览器认为“第一行已定”，后续内容再变也不影响列宽。这是最容易被忽略的陷阱。
- 不要调用不存在的
table.redraw()方法 - 安全做法是手动触发重读：
table.style.width = table.offsetWidth + 'px'，强制浏览器重新取值并应用fixed规则 - 若用 Layui/Element Plus 等框架，
table.reload()后必须紧跟table.resize()（Layui 2.8+）或重建固定列逻辑
列宽控制权不在内容手里，而在你写的那一行 <col> 或第一行 <th> 里——只要它存在、可读、没被干扰样式覆盖，跨浏览器一致性就有保障。
