table-layout: fixed 生效需同时满足三个条件：table 必须显式设置 width（如 100% 或具体像素值），至少一列需通过 或第一行 / 的 width 属性定义宽度，且 上禁用 white-space: nowrap 以允许换行。
table-layout: fixed 是唯一能真正固定列宽的 CSS 方式，但单独写它没用——必须同时满足三个条件：表格有明确 width、<col> 或第一行单元格定义列宽基准、<td> 上控制文本换行行为。
<h3>为什么写了 <code>table-layout: fixed 却没生效？
浏览器只在 table 元素上识别该声明，且默认忽略未提供宽度依据的 fixed 指令。常见失效原因：
-
table没设width（如width: 100%或width: 800px），导致百分比<col style="width: 25%">无参照 -
<col>写在<thead> 里面，或嵌套在 <code><tbody> 中——它必须是 <code><table> 的直接子元素，且在 <code><caption></caption>（如有）之后、<thead> 之前 <li>用了已废弃的 <code><col width="120">，现代浏览器静默忽略；必须改用<col style="width: 120px"> - 所有
<col>都没写width，浏览器 fallback 到“均分 100%”，结果仍随内容波动 -
<colgroup></colgroup>必须为<table> 的直接子元素，顺序不能错：<code><table> <colgroup> <col> <col> </colgroup> <thead>...</thead> </table> - 每个
<col>对应一列，数量必须和实际列数一致；列数动态时，得用 JS 插入对应数量的<col>元素 -
<col style="width: 120px">合法，<col style="width: 25%">也合法，但前提是table有明确width -
<col style="width: auto">可用于最后一列自适应剩余空间，但仅限一列；多列写auto会导致 fixed 模式退化 -
span="3"不会让三列都变宽，只表示该<col>覆盖三列逻辑位置，样式只作用于起始列 - 属性必须加在
<td> 或 <code><th> 上，加在 <code><tr> 或 <code><table> 上无效 <li> <code>word-break: break-all：适合纯数字、哈希、无空格字符串，在任意字符间断（包括中文汉字之间） -
overflow-wrap: break-word：保留英文单词完整性，中英文混合更自然；旧版 Safari/Firefox 建议同时写两个 - 搭配
white-space: nowrap+overflow: hidden+text-overflow: ellipsis实现截断省略，但需注意min-width: 0（某些框架会设min-width: auto干扰效果）
怎么用 <col> 真正控住每一列？
<col> 是优先级最高、语义最清晰的列宽定义方式，但它不自动生效，需配合结构与样式：
<td> 里文字撑破列宽怎么办？
<p><code>table-layout: fixed 只决定“列切多宽”，不管内容是否溢出。要防止撑破，必须显式控制文本行为：
最容易被忽略的是：列宽控制不是单点设置，而是 table-layout: fixed + table width + <col> 结构 + <td> 文本策略 四者缺一不可。少一个，就可能在 Safari 塌缩成 0px，或在 Chrome 下内容撑破布局，看似简单，实则环环相扣。</td>
最容易被忽略的是：列宽控制不是单点设置，而是 table-layout: fixed + table width + <col> 结构 + <td> 文本策略 四者缺一不可。少一个，就可能在 Safari 塌缩成 0px，或在 Chrome 下内容撑破布局，看似简单，实则环环相扣。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
