固定列宽不随内容变化的关键是启用table-layout: fixed并配合显式宽度声明，否则col的width仅作参考；必须将table-layout: fixed设在<table>上，<col>须用style="width:120px"而非width属性，且<table>需有明确width（如100%），三者缺一不可。
固定列宽不随内容变化，关键不是“设个 width 就完事”，而是必须启用 table-layout: fixed 并配合显式宽度声明——否则浏览器照旧按内容撑开，你写的 width: 120px 只是摆设。
table-layout: fixed 必须显式设置在 <table> 上
这是最常被跳过的一步。很多开发者写了 <col style="width: 120px"> 却没给 <table> 加 table-layout: fixed，结果列宽依然浮动。
-
table-layout: auto（默认）：浏览器扫描全部单元格内容后才决定列宽，<col>的 width 被忽略或仅作参考 -
table-layout: fixed：只看第一行<th>/<td>或<col>的 width，立刻分配列宽，后续内容超出则截断/换行 - 必须写在
<table>元素上，例如：<table style="table-layout: fixed; width: 100%">——width也得有，否则 fixed 布局无基准可依
<col> 的 width 写法必须用 CSS style，不能用 HTML 属性
<col width="120"> 在所有现代浏览器中已被废弃，静默失效，但不报错。你看到列宽没变，很可能就是栽在这儿。
- ❌ 错误：
<col width="120"> - ✅ 正确：
<col style="width: 120px">（像素值） - ✅ 正确：
<col style="width: 25%">（百分比，前提是<table>有明确 width，如width: 100%） -
<colgroup>必须是<table>的直接子元素，不能塞在<tbody>或<thead>里
内容过长时，光 fixed 不够，还得管住溢出行为
即使列宽固定了，一长串无空格文本（比如 UUID、URL）仍会把单元格内容顶出边界，看起来像“没固定住”。
立即学习“前端免费学习笔记（深入）”；
- 单行截断加省略号：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行自动换行：
word-break: break-word;或word-wrap: break-word;（注意：后者已过时，推荐前者） - 避免在
<td>里同时设white-space: nowrap和放超长无空格文本——这会让内容横向溢出，破坏 fixed 效果
动态列数场景下，<col> 必须数量匹配
如果表格列由后端返回字段动态生成（比如 5 列），但你只手写了 3 个 <col>，那第 4、5 列就完全没受控，会回退到 auto 行为，宽度不可预测。
- 服务端渲染时，确保生成的
<col>数量与实际列数一致 - 前端 JS 动态渲染表格时，需同步插入对应数量的
<col>元素，例如：Array.from({length: colCount}).map(() => <col style="width: 120px">) -
<col span="n">不会让 n 列都继承该 width；它只占位 n 列，但样式只作用于起始列 —— 想等宽？老老实实写 n 个独立<col>
真正卡住人的地方，往往不是语法写错，而是 table-layout: fixed 和 <col> 的组合缺一不可，且 <table> 自身宽度必须明确——三者少一个，列宽就还是随内容飘。
