table-layout: fixed 单独使用无效，必须配合 table 显式 width、列宽定义（如 或首行单元格 width）及文本溢出控制（如 white-space、overflow）才能真正固定列宽。
table-layout: fixed 单独写在 CSS 里不会让列变“固定”，它只是切换布局算法——真正起效必须配齐三样东西：table 的显式 width、列宽定义来源（<col> 或第一行 width）、以及对单元格内文本行为的控制。
为什么 table-layout: fixed 加了也没用？
浏览器不靠“写了什么”决定列宽，而是按三级优先级找依据：<col> > 第一行 <th>/<code><td> 的 <code>width 属性（HTML 属性或内联 style）> 均分。如果全没提供，它就退回到“均分 100%”，而这个“100%”又依赖父容器宽度是否明确。
-
table没设width（比如只写了table { table-layout: fixed; }），列宽会塌缩或撑开 -
<col>写在<thead> 里面（必须是 <code><table> 的直接子元素，且在 <code><thead> 之前） <li>给第二行 <code><td width="150"> —— <code>fixed模式下只读第一行，这行被完全忽略 - 父容器是
display: inline或未设宽的flex容器，导致百分比width解析失败 <table> 必须有明确 <code>width，如width: 100%或width: 800px-
<col>必须放在<thead> 前，且是 <code><table> 的直接子元素 <li>示例结构：<pre class="brush:php;toolbar:false;"></pre> <table style="table-layout: fixed; width: 100%;"> <col width="120"> <col width="30%"> <col> <thead><tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr></thead> <tbody><tr> <td>1</td> <td>商品A</td> <td>编辑</td> </tr></tbody> </table> </li> <li>所有 <code><col>的宽度总和超过table宽度时，浏览器按比例缩放，不会截断 - 要截断加省略号：该列
<td> 需同时满足 —— 有明确宽度（来自 <code><col>）、display: table-cell（默认）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 要换行：用
word-break: break-word或overflow-wrap: break-word，并确保white-space不是nowrap - 多行文本上下错位？给
th和td加vertical-align: top - IE8–11 只认 HTML
width属性（如<col width="120">），不认 CSSstyle="width: 120px"，兼容老项目得留心
用 <col> 精确控制每一列宽度
<col> 是唯一语义正确、优先级最高、且不依赖渲染顺序的列宽定义方式。它不支持 fr 单位，只认 px、%、auto（等价于不设宽，均分剩余空间）。
文字溢出怎么处理才不破布局？
table-layout: fixed 下，长文本默认不换行也不截断，直接撑破单元格。必须手动干预文本渲染行为。
最常被忽略的是：即使 <col> 写对了、table 宽也设了，只要某列内容里混了 white-space: nowrap + 超长无空格字符串，整列还是会撑开——这不是 bug，是 fixed 布局下文本行为未受控的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
