如何用CSS table-layout修复表格列宽失控

作者：袖梨 2026-09-10

table-layout: fixed没生效的根本原因是缺少三要素：table未设显式width、未通过<colgroup>或第一行单元格定义列宽、混用min-width/max-width干扰宽度计算；必须三者齐备才能真正启用固定布局。

table-layout: fixed 为什么没生效

根本不是属性写错了，而是它被浏览器悄悄忽略了。只要漏掉下面任意一条，table-layout: fixed 就会降级回 auto，列宽继续被内容撑开：

<table> 没设明确的 width（比如 width: 100% 或 width: 800px），没有参照基准，fixed 就无从计算
列宽定义没落在第一行的 <th>/<td> 上，或没用 <colgroup><col> —— fixed 只读第一行，后面写的 width 全被无视
在单元格上混用了 min-width 或 max-width，尤其 Firefox 中它们会强行覆盖百分比宽度，优先级比 width 还高

colgroup 是最稳的列宽定义方式

比起给第一行 <th> 写 style="width: 30%"，<colgroup> 几乎不会翻车：

不依赖 DOM 渲染顺序，哪怕 <col> 放在 <tbody> 后面也生效
不受 colspan 干扰，合并单元格时列宽依然准确
Android WebView 和旧版 Safari 对 <col> 的支持比内联 width 更一致
避免像素和百分比混用（比如一列 120px、一列 30%），否则整表可能回退到 auto

示例：

<table style="width: 100%; table-layout: fixed;"><colgroup><col style="width: 60%"><col style="width: 20%"><col style="width: 20%"></colgroup><thead><tr><th>标题</th><th>状态</th><th>操作</th></tr></thead></table>

text-overflow: ellipsis 在 td 上不生效怎么办

不是 CSS 写错，是前提条件没凑齐。这三样必须同时存在，缺一不可：

table 设置了 table-layout: fixed 和显式 width
列宽由 <col> 或第一行单元格定义（推荐 <col>）
<td> 上加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

常见陷阱：

父容器（比如外层 <div class="table-wrapper">）没设 overflow-x: auto，导致横向滚动条出不来
<td> 被套在 display: inline-table 里，破坏表格渲染流
对中文长串或 URL 直接用 white-space: nowrap，反而造成整行横向溢出，此时该换 word-break: break-word + max-width