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