colgroup的span属性仅声明列范围，不直接控制样式；它仅支持width、background-color、border等有限CSS属性，且必须作为table直接子元素、配合table-layout: fixed才能生效。
colgroup的span属性不直接控制样式，只声明列范围
很多人以为span能“把样式广播到多列”，其实它只是告诉浏览器：“这个<col>描述接下来连续的 N 列”。它不渲染、不继承、不触发重排，也不让background-color或width自动复制到后续列——写<col span="3" style="width: 100px">，只有第 1 列宽 100px，第 2、3 列按内容撑开或均分剩余空间。
真正生效的是<col>自身携带的有限 CSS 属性（仅width、background-color、border等），且必须满足结构前提：
-
<colgroup></colgroup>必须是<table>的直接子元素，且紧贴在<code><caption></caption>之后、<thead>之前 <li>所有<code><col>的span总和必须等于表格实际列数，少一个或多一个都会导致后续列样式错位 - 写了
<col span="2">后，下一个<col>从第 3 列开始计数，不是“跳过 2 列再应用”
想批量设背景色或边框？用:nth-child()配合span语义定位
span本身不发样式，但它是你写:nth-child()的可靠依据。比如<col span="2" id="user-cols">表示前两列是用户信息组，你就该这样写 CSS：
th:nth-child(-n+2), td:nth-child(-n+2) { background-color: #f8f9fa; }
th:nth-child(2), td:nth-child(2) { border-right: 1px solid #dee2e6; }
关键点：
立即学习“前端免费学习笔记（深入）”；
- 别用
:nth-of-type()——<th>和<code><td>是不同标签，序列会断 <li> <code>-n+2比1,2更易维护，尤其当列数动态增减时 - 如果表格有
<colgroup></colgroup>但没显式写<col>，浏览器会自动生成默认<col>，但无法用id或class精准锚定，建议始终显式声明 - 没设
table-layout: fixed：长文本、图片或嵌套元素会撑开列，<col>的width变成摆设 <table>没设明确宽度（如<code>width: 100%或width: 800px）：百分比width无法计算，被忽略- 用了已废弃的
width="120"属性：HTML5 中静默失效，必须用style="width: 120px"或 CSS class -
<col span="3" style="width: 300px">≠ 三列各 100px：它只分配总宽，第二、三列宽度由内容决定，除非你再加white-space: nowrap和overflow: hidden - 给
<col span="3" id="price-cols">加id，JS 就能用document.querySelector('#price-cols').span拿到列数，用于动态列操作 - 配合无障碍工具，屏幕阅读器能识别“这组 3 列是价格相关”，比纯
:nth-child(4-6)更清晰 - 多人协作时，
<colgroup></colgroup>结构比一堆td:nth-child(7)更容易理解列逻辑关系 - 如果表格列数会变，别依赖
span自动适配——它不会响应式更新，必须同步生成/删除<col>节点
批量设宽度必须配table-layout: fixed，否则span无效
span对宽度控制毫无帮助，真正起作用的是table { table-layout: fixed; } + 每个<col>的width值。常见失效场景：
span属性真正有用的地方：语义分组 + JS 读取
放弃把span当样式工具，它最实在的价值是语义和脚本可读性：
复杂表格里，span不是样式捷径，而是列意图的说明书。真要批量控制，靠:nth-child()写 CSS，靠 JS 操作 DOM，靠table-layout: fixed稳住布局——span只是帮你把说明书写清楚而已。
