table-layout: fixed 本身不固定列宽，只切换计算逻辑；必须配合 table 显式 width、col 或第一行 width 声明及文本溢出控制才生效，缺一不可。
table-layout: fixed 本身不固定列宽，它只切换列宽计算逻辑——真正起作用的是你给它提供的宽度依据。没配对的宽度声明，table-layout: fixed 就是摆设。
为什么写了 table-layout: fixed 却没效果？
浏览器根本不认“空转”的 fixed：它必须有明确的列宽来源才能分配空间。常见失效原因就是缺了三样东西中的至少一样：
-
table元素没设width（比如width: 100%或width: 600px） - 没用
<col>，也没在第一行<th>/<code><td> 上写 <code>width（HTML 属性或内联style） - 文本溢出没控制，导致内容撑破单元格，看起来像“又自适应了”
-
<col>必须包裹在<colgroup></colgroup>中（虽然部分浏览器允许裸写，但不推荐） - 每个
<col>对应一列，顺序必须和表头/数据行严格一致 - 支持
px、%、甚至auto（但auto在fixed下行为不可靠，慎用） - 没设
width的<col>会均分剩余空间，不是按内容长度分配
特别注意：<col> 必须直接放在 <table> 开始后、<code><thead> 前，不能塞进 <code><thead> 或 <code><tbody> 里；IE 只认 HTML <code>width 属性（如 <col width="120">），不认 CSS width。
怎么用 <col> 精确控制每一列？
<col> 是最稳定、最易维护的方式，尤其适合多行数据表格。它的宽度优先级高于 <th>/<code><td> 的 <code>width，且能统一管理列样式。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col width="120">
<col width="30%">
<col>
</colgroup>
<thead><tr><th>ID</th><th>名称</th><th>操作</th></tr></thead>
<tbody><tr><td>1</td><td>商品A</td><td>编辑</td></tr></tbody>
</table>
文字溢出怎么处理才不崩？
table-layout: fixed 下，文本不会自动换行或截断——这是最常被忽略的环节。光设列宽，不控文本，等于白干。
- 要截断显示：给
td/th加overflow: hidden+text-overflow: ellipsis+white-space: nowrap，且确保该单元格有明确宽度（来自<col>或第一行width） - 要强制换行：用
word-break: break-word或overflow-wrap: break-word，避免长英文或数字撑开列 - 务必加
vertical-align: top，否则多行文本容易上下错位 -
white-space: nowrap和长文本一起用时，若没设overflow，内容会直接溢出到相邻列，视觉上像“列宽失效”
兼容性和性能要注意什么？
IE8–11 对 table-layout: fixed 的实现是残缺的：它完全忽略 <col> 的 CSS width，只读 HTML width 属性（如 <col width="120">）。现代浏览器两者都支持，但跨浏览器时建议统一用 HTML 属性写法。
性能上，table-layout: fixed 能显著加快长表格渲染——浏览器不用逐行扫描内容来算列宽，而是按预设宽度直接画。但代价是：一旦列宽定死，内容再长也挤不宽列，所以文本控制必须前置。
真正麻烦的不是怎么写，而是忘了检查父容器是否限制了宽度（比如 flex 容器里没设 flex-basis）、或用了 display: inline-table 导致百分比宽度失效——这些细节一漏，fixed 就彻底失灵。
