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

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

table-layout: fixed 为什么没生效

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

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

colgroup 是最稳的列宽定义方式

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

1. 不依赖 DOM 渲染顺序，哪怕 <col> 放在 <tbody> 后面也生效
2. 不受 colspan 干扰，合并单元格时列宽依然准确
3. Android WebView 和旧版 Safari 对 <col> 的支持比内联 width 更一致
4. 避免像素和百分比混用（比如一列 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 写错，是前提条件没凑齐。这三样必须同时存在，缺一不可：

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

常见陷阱：

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

第一行有 colspan 时列宽失效怎么修

原因很直接：table-layout: fixed 只认第一行，而 colspan 让这一行“缺列”，浏览器就按剩余列数均分宽度，后续行的 width 全无效。

可靠解法只有两个：

1. 用 <colgroup><col> 定义所有列宽（推荐，干净且兼容）
2. 加一行隐藏的基准行，放在 <thead> 前或 <tbody> 前，display: none 或 height: 0 都行，但必须保证它是视觉上第一行且不含 colspan

不推荐用 visibility: hidden，某些老浏览器仍会参与布局计算；display: none 是更稳妥的选择。