写了这么多年表格，你真的懂 table-layout 吗？

仓库源码：github.com/parade0393/…

在线演示：parade0393.github.io/table-layou…

1. table-layout 是什么？

table-layout 决定了浏览器如何计算列宽与单元格排版。核心只有两种取值：

• auto：先看内容，再算列宽；内容越多、越长，越容易把列撑开。
• fixed：先定列宽，再排内容；内容超出时被截断/换行/省略，布局更稳定。

️ 核心差异速览

浏览器决策示意（简化）

flowchart LR
  A[读取表头/列宽声明] --> B{table-layout}
  B -- auto --> C[测量内容宽度]
  C --> D[计算列宽]
  B -- fixed --> E[按声明/剩余空间分配]
  E --> F[直接排版]
  D --> F[排版]

2. 用案例重新理解 table-layout

2.1 默认行为：table-layout: auto

• 内容驱动列宽，长文本会“顶开”列。
• 不会无限撑开：列宽仍受容器宽度约束。
• 控制力弱：列宽声明会被内容干预，浏览器分配策略可能存在差异。

结论：“能用，但不稳定；能控，但不够准。”

2.2 fixed 基本效果

• fixed 只决定“列宽如何算”，不自动省略。
• 默认依然换行（white-space: normal），省略号要显式开启。

2.3 fixed + 不设置列宽

• 浏览器近似平均分配列宽。
• 内容不会参与列宽计算，长文本只在既定列宽内换行/截断。

2.4 fixed + 只设置部分列宽

在 fixed 下的直觉算法是：

1. 先分配已声明的列宽
2. 剩余宽度平均给未声明列

2.5 fixed + 列宽总和大于容器

• 声明宽度会被保留，表格整体超出容器。
• 是否可滚动取决于父容器是否设置 overflow-x: auto。

2.6 fixed + 列宽总和小于容器

表格会把“剩余空间”补齐给未声明列或按浏览器算法分配，因此不同浏览器细节可能略有差异。

2.7 列宽声明的“差一口气”：colgroup vs th/td

在 table-layout: fixed 下，列宽声明位置不同，浏览器对“宽度”的理解也不同，这是最容易踩坑的点之一。

放在 col/colgroup 上的 width

• 参与 列宽 计算，等价于“这列最终占多宽”。
• 视觉上更像 border-box：包含单元格的 padding/border 在内的最终宽度。
• 更稳定、更符合预期，尤其是固定列/固定表头/滚动场景。

放在 th/td 上的 width

• 更接近 内容宽度（content box）。
• padding 和 border 会额外叠加在外侧，导致“看起来更宽”。
• 因为内容盒子 + padding/border = 视觉宽度，所以容易出现“同样 120px，但表头更宽”的错觉。

实战结论

当你需要“列宽强控制”时，优先用：

• colgroup/col 作为列宽入口
• table-layout: fixed 作为布局策略

这组合的表现最接近“所见即所得”，且可维护性更高。

3. 三大表格库的 table-layout 处理（基于源码）

3.1 Element Plus

结论

• tableLayout 是 props，默认值为 fixed。
• 当设置了 maxHeight 时，内部会强制以 fixed 方式渲染表格布局。
• 列宽分配依赖内部列计算与 colgroup，而非内容测量。

源码依据

• tableLayout 默认值为 fixed：node_modules/element-plus/es/components/table/src/table/defaults.mjs
• maxHeight 强制返回 fixed：node_modules/element-plus/es/components/table/src/table/style-helper.mjs
• colgroup 行为：auto 时给列设置 style.width；fixed 时用 name 进行列宽同步：node_modules/element-plus/es/components/table/src/h-helper.mjs

工程含义

• Element Plus 的表格行为更接近“强控制列宽”的策略，适合固定列/固定表头/大数据表格。

3.2 Ant Design Vue

结论

• tableLayout prop 优先级最高（显式传入即使用）。
• 未传入时，满足以下任一条件会切换为 fixed：
  • 存在固定列（fixed 列 + 横向滚动）
  • 固定表头（scroll.y）
  • sticky 启用
  • 任意列启用 ellipsis
• 例外：当固定列且 scroll.x === 'max-content' 时，会回落为 auto。

源码依据

• 计算逻辑位于 node_modules/ant-design-vue/es/vc-table/Table.js 的 mergedTableLayout。

工程含义

• Ant Design Vue 默认偏 auto，但在“固定列/固定表头/ellipsis/sticky”场景下自动转 fixed。
• 若你需要绝对可控，仍建议显式传 tableLayout="fixed"。

为什么这些条件会切换为 fixed

• 固定列（fixed + 横向滚动）：左右分栏需保持对齐，fixed 避免列宽因内容变化而抖动。
• 固定表头（scroll.y）：表头与表体分离渲染，必须共享稳定列宽。
• sticky：同样是分离定位，需要稳定列宽避免错位。
• ellipsis：省略号依赖固定列宽，否则内容会撑开导致省略失效。

3.3 vxe-table

结论

• 主表结构样式默认就是 table-layout: fixed。
• 未发现 tableLayout 相关 props 可覆盖该行为（当前依赖版本）。
• 导出样式也明确指定了 table-layout: fixed（非 print 场景）。

源码依据

• 表格主结构：node_modules/vxe-table/es/vxe-table/style.css
• 导出 HTML 样式：node_modules/vxe-table/es/table/module/export/util.js

工程含义

• vxe-table 假设“固定布局 + 列配置”是默认前提，适合大数据与复杂列。

4. 三者对比

5. 小结

• auto 更“顺手”，但不可控；fixed 更“工程化”，但更需要列宽策略。
• 组件库层面的默认策略差异很大，显式设置 tableLayout 能避免“默认陷阱”。