table-layout: fixed 单独使用无效，因其仅启用固定布局算法却不提供列宽值；必须同时设置表格显式宽度、<col> 或首行单元格的 width，并控制文本溢出行为，否则浏览器将回退至内容驱动的自动布局。
只写 table-layout: fixed 为什么没用
因为 table-layout: fixed 只是启用固定布局算法，它本身不提供任何列宽值。浏览器看到这个声明后，会立刻停止扫描全部内容来算宽度，但如果没有明确的列宽来源，它就只能按“最小内容宽度”回退渲染——看起来和 auto 没区别。
必须同时满足以下任一条件，fixed 才真正生效：
-
<colgroup><col width="150"></colgroup>（最稳，推荐用px） - 第一行的
<th>或<td>带内联width（如style="width: 20%"），且<table>有显式width -
<table>自身设了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> 有明确 width 时才可预测。
IE11 中 table-layout: fixed 列宽完全不生效怎么办
IE11 对 table-layout: fixed 的支持极度依赖 <col> 的显式像素宽度。它无视 min-width、width 百分比、甚至 style="width: 30%"，只认 <col width="120"> 或 <col style="width: 120px"> 这类带明确 px 值的定义。
实操要点：
- 必须用
<colgroup>包裹<col>，且每个<col>都要设width属性 -
<colgroup>必须放在<thead>之前（DOM 中顺序不能错） - 避免在
<th>或<td>上写width，IE11 可能根本不读第一行的样式 - Layui 等框架动态渲染后，需在
done回调里手动插入<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>要设max-width并为block或inline-block
容易被忽略的一点：table-layout: fixed 不继承，必须直接作用于 <table> 元素本身；写在父容器上无效，被更具体选择器覆盖也无效。
