table-layout: fixed 单独使用无效，必须同时满足三个前提：table 显式设置 width（如 100%），至少一列通过 或第一行单元格的 width 属性定义宽度，且 禁用 white-space: nowrap 以确保文本可控换行或截断。
table-layout: fixed 单独写在 CSS 里基本没用，它只是切换布局模式，不设宽度基准就无法分配列宽——你看到的“列宽没固定”，90% 是因为缺了三样东西：table 的 width、<col> 或第一行单元格的 width、以及对文本溢出的显式控制。
为什么 table-layout: fixed 写了却没生效？
浏览器只认“预设宽度来源”，不是写了 table-layout: fixed 就自动固定。它按三级优先级找列宽依据：<col> > 第一行 <th>/</th>
<td> 的 <code>width（HTML 属性或内联 style）> 均分。如果全没提供，它就退回到“均分 100%”，而均分结果受内容影响极大，尤其小屏下容易崩。
- 父容器没设宽度，或为
display: inline/ 未设宽的flex容器，导致百分比解析失败 -
table自身没设width（如width: 100%或width: 600px），fixed失去计算锚点 - 用了
white-space: nowrap+ 长文本但没配overflow: hidden，内容溢出却不换行，看起来像“列没固定住”
用
<col> 必须放在 <thead> 前（或直接在 <code><table> 下），不能写在 <code><tbody> 里。它的 <code>width 值优先级高于 <th>/</th>
<td> 的 <code>width。
- 没设
width的<col>会均分剩余空间（不是按内容长度） - 所有
<col>都设了像素值但总和超过table宽度，浏览器会按比例缩放（非截断） - 推荐结构：
ID 名称 操作 1 商品A 编辑
fixed 布局下文字溢出怎么处理？
默认情况下，table-layout: fixed 会让长文本直接撑破单元格或换行异常。必须手动控制文本行为：
- 对需要截断的列加：
overflow: hidden、text-overflow: ellipsis、white-space: nowrap - 对需要换行的列加：
word-break: break-word或overflow-wrap: break-word - 务必给
<td> 和 <code><th> 设置 <code>vertical-align: top，否则多行文本可能上下错位 -
text-overflow: ellipsis生效前提：该单元格有明确宽度（来自<col>或width）、display为table-cell（默认）、且父级未设white-space: nowrap
真正让列宽“固定”的关键不在属性本身，而在宽度来源是否明确、文本行为是否可控、父容器是否提供可依赖的尺寸上下文。漏掉任意一环，table-layout: fixed 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
