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