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

table-layout: fixed 为什么没生效

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

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

colgroup 是最稳的列宽定义方式

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

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

示例：

标题	状态	操作

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

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

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

  常见陷阱：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

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

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

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

  可靠解法只有两个：

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

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