<colgroup>不能直接设样式或内容，因其是纯结构型标签，无盒模型、不响应display/padding/content，且多数浏览器中console.log(document.querySelector('col'))返回null；其唯一作用是为后续<tr>中的单元格提供列级默认属性（主要是宽度和span），仅对紧邻的<col>子元素生效。
为什么 <colgroup> 不能直接设样式或内容
<colgroup> 是纯结构型标签，浏览器不把它当“可渲染元素”——它没有盒模型、不响应 display、padding 或 content，连 console.log(document.querySelector('col')) 都拿不到实际 DOM 节点（多数浏览器返回 null）。它的唯一作用是为后续 <tr> 中的单元格提供列级默认属性（主要是宽度和 span），且只对紧邻的 <col> 子元素生效。
<col> 的 span 属性怎么用才不翻车
span 用于合并多列定义，但极易误用：它不是“跨列显示”，而是“重复应用当前 <col> 的属性到接下来的 N 列”。常见错误是写成 <col span="3"></col> 后又加两个 <col>，导致列数错位。
- 正确做法：整行列宽定义必须由所有
<col>的span值之和精确匹配表格总列数 - 如果表格有 5 列，可用
<col span="2"></col><col></col><col span="2"></col>（2+1+2=5） -
span不能与width混用在同一个<col>上影响计算逻辑（部分旧版 IE 会忽略width） - 动态插入行时，
span不会自动适配新列——它只作用于初始 HTML 解析阶段
用 width 控制列宽的实际效果差异
<col> 的 width 属性在不同场景下行为不一致：
- 设为像素值（如
width="120"）：大多数浏览器会严格按此像素分配，但若表格设了table-layout: fixed，则优先级高于单元格内联宽度 - 设为百分比（如
width="25%"）：仅当父<table>有明确宽度时才生效，否则被忽略 - 设为
auto或不设：列宽由内容撑开，<col>定义失效 - CSS 中用
col { width: 100px }在多数现代浏览器有效，但 Safari 对该选择器支持不稳定，建议仍用 HTMLwidth属性
和 table-layout: fixed 搭配时的关键约束
启用 table-layout: fixed 后，表格列宽完全由第一行（或 <colgroup>）决定，后续行单元格内容溢出不会撑宽列。这时 <colgroup> 才真正发挥批量控制作用。
- 必须确保
<colgroup>在<thead>或第一个<tr>之前声明，否则部分浏览器可能忽略 - 如果第一行有
colspan单元格，其占用列数会干扰<col>的对应关系——例如<td colspan="2">占两列，但只算作一个单元格，<col>仍需按物理列数逐个对齐 - 导出为 Excel 或打印时，
table-layout: fixed可能导致列宽丢失，需额外用 CSS@media print重置
真正难的是列数动态变化时的维护——<colgroup> 无法用 JS 动态增删后保持语义一致性，一旦列结构变，就得同步改 HTML 结构，而不是只改数据。
