表格布局属性

最后更新：2026-09-13

table-layout 表格布局属性

table-layout 属性决定表格单元格宽度的计算算法。默认值 auto 根据内容自动调整列宽，内容多时列会被撑宽；fixed 则按表格首行或显式宽度固定列宽，不受内容影响。fixed 模式渲染性能更好，适合数据量大的表格。

分类
初始值	auto
继承	否
适用于
可动画
CSS 版本	CSS2
状态	标准

📝 语法

table-layout: auto | fixed;

⚙️ 取值

值	类型	描述
`auto \| fixed`	关键字	表格布局算法

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
table-layout	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： table-layout:fixed 配合 width:100% 和首行 th 的宽度设置，可以快速实现等宽或按比例分配列宽。

❓ 常见问题

Qtable-layout: auto 和 fixed 模式有什么区别？

Aauto（默认）：浏览器遍历所有单元格后根据内容自动计算列宽，内容多时列会被撑宽，可能撑破容器，首次渲染较慢；fixed：列宽由表格首行或显式设置的宽度决定，不受内容影响，渲染速度更快，内容溢出时可配合 overflow 或 text-overflow 控制。

Q什么时候应该用 table-layout: fixed？

A数据量大、列宽需要固定或需要文本截断（text-overflow: ellipsis）时推荐用 fixed。它让列宽由首行决定，渲染性能更好，长内容不会撑破表格。响应式表格也常用 fixed 配合百分比列宽实现等宽布局。

Q为什么 table-layout: fixed 时列宽设置不生效？

Afixed 模式下列宽由表格第一行（通常是 th）决定，后续行 td 的宽度设置会被忽略。要控制列宽，应在首行 th 上设置 width，或用 <colgroup> 的 <col> 指定。如果首行没设宽度，列宽按表格总宽除以列数均分。这是 fixed 与 auto 行为差异最大的点。

Qtable-layout: fixed 能解决内容撑破表格的问题吗？

A可以。auto 模式下长内容会把列撑宽甚至撑破容器；fixed 模式下列宽由首行决定，内容超出后默认换行或溢出。配合 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 可实现单行截断省略号，是处理超长文本和表格溢出的常用组合。