table-layout: fixed 是唯一能稳定控制列宽比例的方案，因其强制按第一行定义列宽且不受后续内容影响，而 auto 模式下浏览器逐行扫描内容、换行逻辑不一导致跨浏览器列宽偏差达30px+。
table-layout: fixed 是唯一能稳定控制列宽比例的方案，其他方式在 Chrome/Firefox/Safari 中表现不一致
为什么 table-layout: auto 下列宽永远算不准
浏览器默认用 table-layout: auto，它会逐行扫描所有单元格内容来推算列宽——第一行短、第二行长，列宽就按最长那行撑开；不同浏览器扫描策略和换行逻辑不同，导致 Safari 把“测试文本”算成 2 行，Chrome 算成 1 行，最终列宽偏差 30px+。这不是 bug，是规范允许的行为。
- 只要没显式设
table-layout: fixed，就别指望百分比或像素宽度能跨浏览器对齐 -
width在auto模式下只是“建议值”，浏览器可以完全忽略 - 哪怕只有一列设了
width: 200px，其它列也会被这列带偏，因为 auto 模式下所有列宽度是联动计算的
必须同时满足的三个条件才能让 fixed 生效
只写 table-layout: fixed 不够，漏掉任意一条都会回退到 auto 行为：
-
table元素必须有明确的width（如width: 100%或width: 800px），否则百分比列宽无参照基准 - 列宽必须定义在
col元素或第一行的th/td上，table-layout: fixed只读第一行定列宽 - 不能在
th/td上混用min-width或max-width，它们会覆盖百分比计算，尤其在 Firefox 中优先级异常高
Firefox 和 Safari 对 overflow 处理差异要单独处理
overflow: hidden 在 Chrome 中能正常截断文字，在 Firefox 中可能失效，Safari 则可能把省略号位置错位——根本原因是三者对 text-overflow: ellipsis 的触发条件判断不同。
立即学习“前端免费学习笔记（深入）”；
- 必须给
th/td同时设置：white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 如果父容器（比如
<div class="table-wrapper">）没设overflow-x: auto，横向滚动条会消失，用户看不到被截断的内容 - Safari 需额外加
-webkit-appearance: none防止表单控件类元素干扰布局
动态内容表格的列宽重算陷阱
用 JS 动态插入行或修改单元格内容后，table-layout: fixed 不会自动重算列宽——浏览器认为“第一行已定，后续不用管”。这是最容易被忽略的点。
- 不要依赖
table.redraw()这类不存在的方法，Layui 或 Element Plus 的 redraw 实际上是重新渲染整张表 - 安全做法：修改内容后，手动触发一次
table.style.width = table.offsetWidth + 'px'，强制浏览器重新读取 width 值并重应用 fixed 规则 - 如果用了 Vue/React，避免直接操作 DOM 宽度，改用 key 强制重渲染 table 元素（但要注意性能）
