table-layout: fixed 必须配合 table 的显式宽度、<col> 或首行单元格的宽度声明，以及文本溢出控制——缺一不可，否则列宽照样被内容撑开；浏览器只按三级优先级（<col> > 首行 width > 均分）确定列宽，任一环节缺失即退化为均分，导致失效。
直接说结论：table-layout: fixed 必须配合 table 的显式宽度、<col> 或首行单元格的宽度声明，以及文本溢出控制——缺一不可，否则列宽照样被内容撑开。
为什么写了 table-layout: fixed 还是不固定？
浏览器只认“预设宽度来源”，不是加了属性就自动生效。它按三级优先级找列宽依据：<col> > 第一行 <th>/<td> 的 width（HTML 属性或内联 style）> 均分剩余空间。如果这三样全没提供，它就退回到均分 100%，而均分结果受内容长度影响极大，尤其小屏下容易崩。
-
<col width="120">是 HTML5 废弃写法，现代浏览器静默忽略，必须改用<col style="width: 120px"> -
<colgroup>必须是<table>的直接子元素，不能套在<div>或其他标签里 - 如果表格嵌套在响应式容器中，
width: 100%比width: 800px更安全；但若父容器宽度未定，百分比会失效
怎么用 <col> 精确控制每列宽度？
<col> 本身只是占位，真正起作用的是它和 table-layout: fixed 的组合。每列需一个独立 <col>，span 不会让多列继承同一宽度。
- 要让三列分别宽 120px / 20% / 自动填充，就得写三个
<col>：<col style="width: 120px"><col style="width: 20%"><col> - 动态生成列（如后端返回字段列表）时，不能手写
<col>，得用 JS 插入对应数量的<col>元素，否则最后一列没样式 - 未设宽度的
<col>会均分剩余空间，不是按内容长度分配
内容过长时怎么防止撑破单元格？
text-overflow: ellipsis 在 table 单元格里生效有硬性前提：该单元格必须有明确宽度（来自 <col> 或 width）、display 为 table-cell（默认）、且父级没设 white-space: nowrap。
立即学习“前端免费学习笔记（深入）”；
- 单行截断推荐组合：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 多行换行用：
word-break: break-word;或overflow-wrap: break-word;（注意：word-break: break-all会在任意位置断词，慎用） - 务必给
<td>和<th>加vertical-align: top，否则多行文本可能上下错位 - 边框和 padding 会影响实际占用空间，建议统一加
box-sizing: border-box;
最容易被忽略的点是：列数必须和 <col> 数量严格一致；表格宽度必须显式设置；文本控制样式必须落到具体单元格上——这三处任一缺失，都会导致“看起来设了却没用”。
