span属性仅声明覆盖列数，不广播样式；如只设第1列宽300px，后两列不继承，需显式写三个或配合table-layout:fixed与明确表格宽度才能可控等宽。
span属性不是“批量设宽”，它只占位不广播样式
span 的作用是声明一个 <col> 元素“覆盖多少列”，而不是把它的 CSS 样式复制到所有被覆盖的列上。比如 <col span="3" style="width: 300px">，浏览器只把这 300px 宽度应用到第 1 列；第 2、3 列不会继承，而是退回到默认行为（内容撑开或由后续 <col> 控制）。
常见错误现象：<col span="3" style="width: 100px"> 写完发现只有第一列变窄，后面两列依然宽得离谱——这不是 bug，是规范定义。
- 想三列都 100px？必须写三个独立的
<col style="width: 100px"> - 想三列共占 300px 且等宽？用
<col span="3" style="width: 300px">+table { table-layout: fixed; }，但第 2、3 列宽度仍不可控（实际取决于内容和剩余空间分配） - 真正可控的等宽方案：显式写出全部
<col>，数量与表格列数严格一致
配合 CSS 设置宽度时，width 属性已完全失效
<col width="120"> 在所有现代浏览器中静默忽略——HTML5 已废弃该属性。你看到的“好像生效”，只是旧版残留，不能依赖。
必须用 CSS 的 width 值，且仅两种写法有效：
<col style="width: 120px">-
<col class="w-120">+ 外部 CSS 中定义.w-120 { width: 120px; }
注意：width: auto 在 <col> 中无效，浏览器会当 0 处理；百分比值（如 width: 30%）必须配合 <table style="width: 100%"> 才能计算，否则被丢弃。
<h3>span 配合 class 实现语义分组与批量选中</h3>
<p><code>span 最实用的场景不是设宽，而是标记逻辑列组，再配合 CSS 选择器批量操作。例如：
<colgroup> <col span="2" id="user-cols"> <col span="3" id="stats-cols"> </colgroup>
然后用 th:nth-child(-n+2), td:nth-child(-n+2) 统一给前两列加背景、边框或字体样式。这种写法稳定、跨浏览器兼容，比依赖 <col> 的有限样式更可靠。
-
:nth-child()是唯一能稳定按“列序”定位的方式，:nth-of-type()在混合<th>/<code><td> 时会断掉序列 <li> <code>span不影响 DOM 结构，但可被 JS 读取：document.querySelector('#user-cols').span返回2 - 别指望
<col>控制文字颜色、字体大小等——它只支持width、background、border（需border-collapse: collapse）、visibility: collapse - 没设这个，
<col>的width只是建议值，长文本照样撑开整列 - 必须写在
<table> 上：<code><table style="table-layout: fixed; width: 100%"><li><code><table> 必须有明确宽度（<code>width: 100%或width: 800px），否则百分比width算不出来 - 漏写任意一列的
<col>，该列可能塌缩为 0（Safari 尤其明显），建议显式补全
colgroup 位置和 table-layout: fixed 是硬性前提
<colgroup></colgroup> 必须是 <table> 的**直接子元素**，且顺序固定：在 <code><caption></caption>（如有）之后、<thead> 或第一行 <code><tr> 之前。放错位置（比如塞进 <code><tbody> 里）不会报错，但 DevTools 里根本看不到效果，样式被静默跳过。
<p><code>table-layout: fixed 是列宽生效的开关，不是可选项：
最容易被忽略的点：结构正确 + CSS 正确 + table-layout: fixed + 明确表格宽度，四者缺一不可。少一个，span 就只是个空标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
