table-layout: fixed 单独使用无效，因其仅启用固定布局算法却不提供列宽值；必须同时设置表格显式宽度、 或首行单元格的 width，并控制文本溢出行为，否则浏览器将回退至内容驱动的自动布局。

只写 table-layout: fixed 为什么没用

因为 table-layout: fixed 只是启用固定布局算法，它本身不提供任何列宽值。浏览器看到这个声明后，会立刻停止扫描全部内容来算宽度，但如果没有明确的列宽来源，它就只能按“最小内容宽度”回退渲染——看起来和 auto 没区别。

必须同时满足以下任一条件，fixed 才真正生效：

• <colgroup><col width="150"></colgroup>（最稳，推荐用 px）
• 第一行的 <th> 或 <code><td> 带内联 <code>width（如 style="width: 20%"），且 <table> 有显式 <code>width
• <table> 自身设了 <code>width（比如 width: 100% 或 width: 600px），再配合百分比 <col width="30%">

  漏掉其中任意一项，fixed 就只是个 CSS 声明，不产生实际效果。

  <col> 和第一行 width 哪个更可靠

  <col> 是唯一能干净定义列轨道的方式。它在 DOM 解析早期就参与布局计算，不受内容、min-width、父容器约束或样式优先级干扰。

  而第一行单元格上的 width 容易被破坏：

  • 长单词或无空格 URL 触发浏览器最小宽度保护（width: 80px 实际可能显示成 120px）
  • 如果第一行有 colspan，该单元格的宽度会参与列分配，但后续列可能错位
  • 更具体的选择器（如 td:nth-child(2)）可能意外覆盖宽度

  所以优先用 <col width="120">，单位用 px 最稳；百分比仅在 <table> 有明确 <code>width 时才可预测。

  IE11 中 table-layout: fixed 列宽完全不生效怎么办

  IE11 对 table-layout: fixed 的支持极度依赖 <col> 的显式像素宽度。它无视 min-width、width 百分比、甚至 style="width: 30%"，只认 <col width="120"> 或 <col style="width: 120px"> 这类带明确 px 值的定义。

  

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

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

  下载

  实操要点：

  • 必须用 <colgroup></colgroup> 包裹 <col>，且每个 <col> 都要设 width 属性
  • <colgroup></colgroup> 必须放在 <thead> 之前（DOM 中顺序不能错） <li>避免在 <code><th> 或 <code><td> 上写 <code>width，IE11 可能根本不读第一行的样式
  • Layui 等框架动态渲染后，需在 done 回调里手动插入 <colgroup></colgroup>，不能靠初始 HTML

  动态 resize 表格时，IE11 不会自动重算 <col> 宽度，得用 JS 显式重设 col.style.width。

  内容溢出导致列宽“被撑开”的真实原因

  不是 table-layout: fixed 失效，而是它只管列宽分配，不管内容换行。只要单元格里有连续无空格文本（比如 https://example.com/very/long/path 或 Base64 字符串），哪怕列宽已由 <col width="120"> 定死，文字也会横向溢出，视觉上像“撑开”了列。

  必须额外加内容控制：

  • word-break: break-all：适合纯英文/数字/URL 场景，在任意字符间断行（包括中文之间）
  • overflow-wrap: break-word：更保守，只在必要时打断单词，中英文混合更自然
  • 单行省略需组合： white-space: nowrap + overflow: hidden + text-overflow: ellipsis，且 <td> 要设 <code>max-width 并为 block 或 inline-block

    容易被忽略的一点：table-layout: fixed 不继承，必须直接作用于 <table> 元素本身；写在父容器上无效，被更具体选择器覆盖也无效。</table>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！