table-layout: fixed 单独使用无效，必须同时满足三个条件：table 有明确 width（如 width: 100%），至少一列通过 或首行 th/td 的 style="width" 定义宽度，且 td 上禁用 white-space: nowrap 以允许换行。
table-layout: fixed 为什么加了没反应
单独写 table-layout: fixed 几乎一定无效。它只是切换列宽计算逻辑，不提供任何宽度依据——浏览器根本不知道“每列该多宽”，只能退回到均分或内容撑开。
必须同时满足三个硬性条件：
-
table元素有明确的width（如width: 100%或width: 800px），不能是auto或未设值 - 列宽来源已声明：用
<col style="width: 120px">（注意不是废弃的width="120"属性），或第一行<th>/<code><td> 带内联 <code>style="width: 120px" - 父容器不能干扰：避免
display: inline、未设宽的flex容器，或body这类无约束的默认 100% 宽元素 -
<colgroup></colgroup>是<table> 的**直接子元素**，且在 <code><caption></caption>（如有）之后、<thead> 之前 <li> <code><col>必须用 CSSstyle或class设置宽度；<col width="120">在所有现代浏览器中被静默忽略 - 每个
<col>对应一列，顺序不能错；5 列就得写 5 个<col>，不能靠span="5"偷懒
<col> 不是摆设，但位置和写法错一点就全白搭。
正确结构必须是：
立即学习“前端免费学习笔记（深入）”；
示例有效写法：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 120px">
<col style="width: 25%">
<col style="width: auto">
</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 下，默认行为会让长文本直接撑破单元格或换行异常。必须手动干预文本渲染逻辑。
对需要截断的列（如 ID、操作按钮）：
- 加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 前提是该单元格有明确宽度（来自
<col>或 CSS），且父级未设white-space: nowrap
对需要换行的列（如描述、URL）：
- 必须同时设
white-space: normal（或pre-wrap）、overflow-wrap: break-word、max-width（如max-width: 200px） - 只加
word-break: break-all往往无效，因为<td> 默认是 <code>white-space: nowrap，会压制所有换行为什么 tbody td { width: 1% } 没用
这个写法几乎无效：
1%是个极小基准值，table-layout: fixed下浏览器常直接归一化处理，列宽仍由首行决定，尤其当表头含图片时，外侧列会被撑开。正确做法是统一控制源头：
- 给
<col>设宽度（最稳定），或同时给<thead> th 和 <code><tbody> td 设相同 <code>width（如width: 25%） - 必须加
box-sizing: border-box，防止 padding 影响百分比计算 - 数字列对齐还要配合等宽字体（如
font-family: 'SFMono-Regular', Consolas），否则text-align: right也无法让小数点对齐
真正难的不是加样式，而是确保三要素始终同步：表宽、列宽依据、文本行为控制。漏掉任意一个，列宽就可能在某个分辨率或某条数据下突然崩掉。
- 给
