根本原因在于table-layout: fixed的前提条件未在各浏览器中严格一致，包括colgroup位置有效性、第一行结构完整性、表格及父容器宽度定义明确性、列宽控制方式统一性等细节差异。

根本原因不是浏览器差异，而是你没让 table-layout: fixed 的前提条件在所有浏览器中严格一致。 它本身在 IE8+ 和现代浏览器中行为高度统一，所谓“宽度不一致”，95% 是因为列宽定义方式、第一行结构或容器约束在不同环境里实际表现不同。

colgroup 位置和有效性被忽略

colgroup 必须出现在 thead 或第一个 tr 之前，且不能被 JS 框架（如 React/Vue 的 SSR 或 hydration 过程）意外移除或重排。某些框架在服务端渲染时会剥离空 col 或合并相邻 colgroup，导致客户端实际生效的列定义缺失。

• 检查浏览器开发者工具 Elements 面板，确认 <colgroup></colgroup> 真实存在且子元素未被删减
• 避免用 JS 动态插入 colgroup —— 渲染引擎在解析 HTML 阶段就已读取它，动态添加无效
• <col width="20%"> 中的百分比必须有参照：父 <table> 得有明确 <code>width（如 width: 100% 或 width: 600px），否则各浏览器 fallback 行为不一

  第一行结构破坏了列宽基准

  table-layout: fixed 默认以表格第一行（thead 或首个 tr）的单元格数量和 width 值为列宽依据。如果第一行含 colspan，浏览器无法将该单元格映射到多列，就会退回到均分剩余宽度 —— 此时你写的 width 全部失效，不同内核对“均分”的舍入处理略有差异，视觉上就显得列宽不一致。

  

  PigX UI 前端开发

  PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

  下载
  • 不要在第一行用 colspan；若必须，改用 <colgroup></colgroup> 显式声明所有列宽，彻底绕过第一行依赖
  • 隐藏首行方案慎用：display: none 会让 IE/Edge 完全跳过该行，而 visibility: hidden; height: 0 在部分旧版 Chrome 下仍可能参与布局计算
  • React/Vue 中用 v-show 或 ngIf 控制首行显隐，等同于 display: none，不可靠

  min-width / max-width 与百分比冲突

  在 table-layout: fixed 下混用 min-width: 120px 和 width: 25% 会触发浏览器各自实现的约束求解逻辑。Chrome 可能优先保百分比，Firefox 可能优先保最小宽度，结果就是列宽在不同环境里“漂移”。

  • 同一列上只用一种宽度控制方式：要么全用 <col width="120">（推荐 px），要么全用 <col style="width: 25%">（需确保 <table> 有确定宽度） <li> <code>fr 单位在 <col> 上完全无效，所有浏览器都忽略，别写 width: 1fr
  • 移动端小屏下，width: 20% 可能被压缩到不足内容最小宽度，此时应配合 white-space: nowrap; overflow: hidden; text-overflow: ellipsis 主动截断，而非依赖 min-width

  真正难调的点往往藏在细节里：比如两个表格看起来都写了 table-layout: fixed 和 width: 100%，但一个父容器是 flex，另一个是 block —— 前者会触发 min-width: auto 保护机制，把表格撑开，后者不会。这种差异不是 table-layout 本身的 bug，而是盒模型叠加效应。

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