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）
• 列宽定义没落在第一行 / 或 中，而是写在第二行或 里
• 或 上混用了 min-width 或 max-width，尤其 Firefox 会直接覆盖百分比计算

  colgroup 是唯一跨浏览器可靠的列宽声明方式

  用 + 定义列宽，能绕过“第一行依赖”和“渲染顺序干扰”，所有现代浏览器（包括 Android WebView 和 Safari 15.4+）都严格遵循其 width 值：

  

  page-agent 浏览器控制（CDP）

  使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

  下载

  标题	状态	操作

  注意： 必须出现在 或 之前；fr 单位无效，只认 px、%、auto；IE8– 只认 HTML width 属性（如 ），不认 CSS style。

  动态更新内容后列宽不重算，不是浏览器卡了

  table-layout: fixed 只在首次渲染时读取第一行或 的宽度，后续 JS 插入新行、修改文本、切换 tab 都不会触发重读。这是最隐蔽的坑：

  • 别调 table.redraw()（不存在）
  • 安全做法是强制重取宽：table.style.width = table.offsetWidth + 'px'
  • 用 Layui/Element Plus 等框架时，table.reload() 后必须紧跟 table.resize()（Layui 2.8+）或手动重建固定列逻辑

  真正难搞的不是怎么写，而是不同浏览器对“第一行”的定义不统一：有的以 为第一行，有的以首个渲染的 为准，还有的把 visibility: hidden 的行当有效行、却跳过 display: none 的——所以永远别让列宽依赖空单元格或动态生成的第一行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！