table-layout: fixed 单独写无效，必须同时满足三个条件：table 显式设置 width（如 100% 或具体像素值）、至少一列通过 或第一行 / 定义宽度、 上控制文本换行（如 word-break: break-all）。
table-layout: fixed 为什么写了没反应
单独写 table-layout: fixed 几乎一定无效——它只是切换布局算法，不提供列宽依据，浏览器根本不知道“每列该多宽”，只能退回到均分或内容撑开。常见失效原因包括：
-
table没设明确width（如width: 100%或width: 800px），导致百分比列宽无参照 -
<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></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>覆盖三列逻辑位置，样式只作用于起始列 -
word-break: break-all：适合纯数字、哈希、无空格字符串，在任意字符间断（包括中文汉字之间） -
word-break: break-word：优先在单词内断行，但对长英文 URL 效果不稳定 -
overflow: hidden; text-overflow: ellipsis; white-space: nowrap：适合需要截断+省略号的场景，但要求td有明确宽度（即父列已固定） - 这些样式必须加在
<td> 或 <code><th> 上，加在 <code><tr> 或 <code><table> 上无效 <h3>colgroup + table-layout: fixed 的最小可用结构</h3> <p>这是能真正让某列“死死卡在 120px”的最小可靠写法：</p> <pre class="brush:php;toolbar:false;"></pre> <table style="table-layout: fixed; width: 100%;"> <colgroup> <col style="width: 120px"> <col style="width: 200px"> <col style="width: auto"> </colgroup> <thead><tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr></thead> <tbody><tr> <td>1</td> <td>测试项</td> <td>编辑</td> </tr></tbody> </table> <p>漏掉 <code>table的width、<colgroup></colgroup>位置错、或没配文本控制，任一环节出问题都会让列宽“看起来没固定”。尤其注意 Safari 下未设width的<col>容易塌缩为 0。
怎么用
<col> 是优先级最高、语义最清晰的列宽定义方式，但它不自动生效，需严格满足结构与样式条件：
里文字撑破列宽怎么办
table-layout: fixed 只决定“列切多宽”，不管内容是否溢出。要防止撑破，必须显式控制文本行为：
table-layout: fixed 只决定“列切多宽”，不管内容是否溢出。要防止撑破，必须显式控制文本行为：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
