HTML5已废弃col的width属性，应改用style="width:120px"或CSS类；colgroup须为table直接子元素且在thead前；table-layout:fixed需table有明确宽度、至少一列显式设宽才生效。
col 标签写 width 属性为什么没用
写了 <col width="120"> 却发现列宽完全没变，不是 CSS 写错，而是浏览器根本没读这个属性——HTML5 已废弃 width 属性，所有现代浏览器静默忽略它。
- ✅ 正确写法：
<col style="width: 120px">或<col class="w-120">（配合 CSS.w-120 { width: 120px; }） - ❌ 错误写法：
<col width="120">、<col width="20%">，哪怕加了table-layout: fixed也无效 -
colgroup必须是<table>的直接子元素，且必须在<thead>之前；塞进<tbody>或<tr>里，DevTools 都不渲染它
table-layout: fixed 不生效的三个硬性前提
只写 table-layout: fixed 不等于列宽就固定了。它像一把锁，但没钥匙（配套条件）就打不开。
-
<table>必须有明确宽度：比如style="width: 100%"或style="width: 800px"；没有这个，百分比width在col里算不出结果 - 至少有一列要显式设
width；否则 Safari 可能直接把某列塌缩为 0px - 未设
width的col会均分“剩余空间”，不是按内容长度分配——这点和auto布局逻辑完全不同
一列定宽 + 一列自适应内容宽度怎么搞
想让操作列固定 120px，标题列自动贴合最长文本宽度，又不想退回到 table-layout: auto 破坏其他列？关键不是靠 width: auto，而是靠 JS 动态测宽后一次性赋值。
-
<col style="width: 120px">（固定列） +<col style="width: 1px">（占位，不是auto） +<col style="width: 180px">（另一固定列） - 点击“重置标题列”时，用
getBoundingClientRect()测量该列所有<td>和对应<th>的实际宽度，取最大值 - 直接设置
col[1].style.width = maxPx + "px"；不要设"auto"，那在fixed下无效，还会触发重排 - 防内容撑开：给
td, th加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
span="3" 不能让三列同时变宽
很多人以为 <col style="width: 150px" span="3"> 能让接下来三列都变成 150px，实际只有第一列生效，后两列回退到默认行为。
立即学习“前端免费学习笔记（深入）”；
-
span只控制“该col元素覆盖多少列位置”，样式仅作用于起始列 - 动态列数场景（如后端返回字段列表），必须用 JS 插入等量
<col>元素，数量不对，最后一列永远没样式 - 真想批量控制，用 CSS：
col:nth-child(2), col:nth-child(3), col:nth-child(4) { width: 150px; }，但前提是列数稳定
真正难的不是设宽，是列数变化、内容动态、响应式缩放这三者叠加时，如何让固定列不跳、自适应列不崩、重置不闪——这时候 colgroup 就得配缓存宽度数组 + 手动同步 DOM，而不是靠一行 CSS 蒙混过关。
