col的span属性不是批量设宽的快捷方式，仅使第1列宽300px，第2、3列回退默认行为；真要三列等宽，须写三个并配合table-layout: fixed。
col 的 span 属性不是批量设宽的快捷方式
写了 <col span="3" style="width: 300px"> 却发现只有第一列变宽，后两列没反应——这不是 bug，是规范行为。span 只控制该 <col> 样式作用的列数范围，不把宽度“分发”给每列。它本质是占位声明，不是广播指令。
-
span="3"表示这个<col>影响第 1、2、3 列，但style="width: 300px"仅应用在第 1 列上 - 第 2、3 列会回退到默认行为：内容撑开，或由后续
<col>控制（如果有的话） - 想三列都宽 100px？必须写三个独立
<col style="width: 100px"> - 想三列共占 300px 且等宽？用
<col style="width: 100px">×3 +table { table-layout: fixed; }
span 唯一靠谱的用途是语义分组 + CSS 伪类联动
真正能靠 span 实现“批量”效果的地方，是配合 nth-child() 做样式复用，而不是直接设宽。
- 例如：
<col span="2" class="user-col">→ 语义上标记前两列为“用户信息组” - 再写 CSS：
td:nth-child(-n+2), th:nth-child(-n+2) { background: #f5f5f5; text-align: left; } -
span这里不参与渲染，只帮你记住哪几列属于同一逻辑组，方便后续用 CSS 精准选中 - 不能指望它让
background-color自动铺满三列——<col>本身只支持background-color，但浏览器对它的渲染一致性差，推荐优先用td:nth-child(n)控制
colgroup 里漏写或写多 col，宽度就失控
表格有 4 列，<colgroup></colgroup> 里只放了 3 个 <col>，最后一列大概率塌缩为 0 宽度（Safari 尤其明显）；放了 5 个，第 5 个完全无效。这不是兼容性问题，是解析规则。
- 每个
<col>按从左到右顺序绑定第 1、2、3… 列，不靠 class 或 id 匹配 - 动态生成表格时，必须同步生成等量
<col>，JS 插入内容后再补<colgroup></colgroup>来不及——浏览器已按初始结构完成布局计算 -
<col>必须闭合：<col>是自闭合标签，写成<col>会被解析为两个元素，第二个无效 - 结构错位（比如
<colgroup></colgroup>塞进<tbody> 里）不会报错，但 DevTools 中根本看不到 computed styles，浏览器直接跳过 <h3>table-layout: fixed 是 width 生效的硬开关</h3> <p>没设 <code>table { table-layout: fixed; }，所有<col style="width: ...">都只是建议值。长文本、图片、嵌套元素一出现，列照样被撑开——尤其在表单场景下，这会导致 UI 错乱。立即学习“前端免费学习笔记（深入）”；
- 必须同时满足两个条件：
<table style="table-layout: fixed; width: 100%">（或明确像素值） <li> <code>width: auto在<col>上无效，会被当 0 处理；百分比值（如width: 30%）必须依赖父容器有明确宽度才能计算 - 启用
table-layout: fixed后，首行<th>/</th> <td> 的内联 <code>width会覆盖<col>设置，所以第一行别乱加 width - 内容溢出需手动兜底：
td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
最常被忽略的点：colgroup 不支持 color、font-size、padding、text-align ——这些必须落到 td/th 或 nth-child 上。它只管“骨架”，不管“皮肤”。
- 必须同时满足两个条件：
