col标签的width属性在HTML5中已被废弃，浏览器静默忽略；必须改用style="width: 120px"并配合table-layout: fixed和table明确宽度才能生效。
col标签的width为什么写了也不生效
写了width但列宽没变，大概率不是CSS写错，而是浏览器压根没读到——它只在特定结构下才认col的width。最常踩的三个坑是：colgroup位置错、table没设table-layout: fixed、用了已废弃的width="120"属性。
-
colgroup必须是<table>的直接子元素，且必须在<caption>（如有）之后、<thead>之前；塞进<tbody>或<tr>里，DevTools里都看不到它 -
<table style="table-layout: fixed">缺一不可；不加这个，col的width只是“建议”，浏览器仍按内容撑开列宽 -
<col width="120">在HTML5中已被废弃，所有现代浏览器静默忽略；必须改用<col style="width: 120px">或<col class="w-120">
span="3"能不能让三列同时变宽
不能。span="3"只表示“这个col覆盖接下来3列的逻辑位置”，但它的样式（比如width）**只作用于起始列**，后两列不会继承。想让三列等宽，就得写三个col，而不是偷懒用span广播。
- 错误写法：
<col style="width: 100px" span="3">→ 实际只有第1列宽100px，第2、3列回退为默认宽度 - 正确写法：
<col style="width: 100px"><col style="width: 100px"><col style="width: 100px"> -
span真正有用的地方是语义分组（如<col span="2" id="user-cols">），再配合th:nth-child(-n+2)批量选中前两列设背景或边框
table-layout: fixed 的副作用和配套措施
启用table-layout: fixed是精准控宽的前提，但它会改变表格行为：列宽完全由col或第一行th/td决定，内容超长时可能溢出或撑破布局。
-
<table>必须有明确宽度（如style="width: 100%"或style="width: 800px"），否则百分比width在col里算不出来 - 某列没设
width→ 该列可能塌缩为0（Safari尤其明显），建议显式设width: auto或最小值 - 防内容撑开：给
td, th加white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 避免
min-width干扰：某些框架会自动加min-width: auto，需重置为min-width: 0
动态列数场景下colgroup怎么维护
列数由JS渲染或后端数据决定时，手写colgroup几乎不可维护——少一个col，最后一列就失控；多一个，多余col无效还干扰调试。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：用JS动态生成
col，数量严格匹配实际列数，再注入style或class - 替代方案：放弃
colgroup，改用td:nth-child(n)或th:nth-child(n)定位列，兼容性好且无需维护结构 - 注意：
nth-of-type()不可靠，因为th和td是不同标签，序列会断掉；必须用nth-child() - 响应式降级：小屏下用
@media覆盖列宽，比如把多列表单转为单列堆叠，此时colgroup完全失效，提前规划fallback
col，而是列数变化时如何保证col数量和th/td列数始终严格对齐——差一个，样式就错位；差两个，整列控制就崩了。 
