table-layout 布局

固定布局与自动布局的差异

概念说明

table-layout 控制列宽的计算方式。 fixed 会根据表格宽度与列宽进行快速布局；auto 会根据内容动态计算。

细节提示：table-layout: fixed 的列宽主要由表格宽度、col 或首行单元格决定，后续行的内容不会参与计算，长文本可能被截断或溢出。

关于滚动与宽度：列宽最终会服从表格本身的宽度。如果 table 被限制为固定宽度（如 width: 300px），即便列宽加起来更大也会被压缩。只有当表格宽度允许自然扩展（例如不设固定宽度，或设置 min-width），并由外层容器开启横向滚动时，列宽才会保持设定值。

auto + col 宽度：在 table-layout: auto 下，col 的宽度是“建议值”。内容仍可能撑大列宽；若表格设置为 width: 100% 且列宽之和小于容器宽度，浏览器会把剩余空间分配给可扩展列。

细节提示：table-layout: auto 会基于整张表的内容一起计算列宽。只要 thead 与 tbody 都参与布局，它们就能一致自适应。但当 tbody 的行被脱离文档流（例如虚拟滚动时使用 position: absolute），这些行就不再参与列宽计算，这时列宽只由表头决定，容易出现内容对不齐。

fixed：布局稳定、性能好
auto：适合内容变化大的表格

基础语法

table {
  table-layout: fixed;
  width: 100%;
}

table.auto {
  table-layout: auto;
  width: 100%;
}

/* 虚拟滚动示意：脱离文档流的行不参与列宽计算 */

tbody {
  position: relative;
  display: block;
}

tbody tr {
  position: absolute;
  left: 0;
}

演示

布局对比

table-layout: fixed
任务	负责人	说明
上线准备	王晨	包含发布计划、回滚策略与监控配置
视觉走查	林夕	桌面与移动端组件细节对齐

table-layout: auto
任务	负责人	说明
上线准备	王晨	包含发布计划、回滚策略与监控配置
视觉走查	林夕	桌面与移动端组件细节对齐

tbody 脱离文档流（模拟虚拟滚动）
任务	负责人	说明
上线准备	王晨	包含发布计划、回滚策略与监控配置
视觉走查	林夕	桌面与移动端组件细节对齐与对比检查

因为 body 行脱离文档流，列宽只根据表头计算，长文本会造成对不齐。

<table class="table-layout-fixed">
  <colgroup>
    <col style="width: 120px" />
    <col style="width: 160px" />
    <col />
  </colgroup>
  ...
</table>

table.virtual-table tbody {
  position: relative;
  display: block;
}

table.virtual-table tbody tr {
  position: absolute;
  left: 0;
}