colgroup 不能用 class 批量控制列样式，因 col 元素不继承父级 class；需通过 col 标签、nth-child() 或 js 动态生成来设置列样式，且 width 等属性受 table-layout 影响。
colgroup 不能用 class 批量控制列样式？
直接给 <colgroup></colgroup> 加 class 没用——它本身不渲染，也不继承 CSS 样式到子列。真正生效的是里面的 <col> 元素，但它们是“幽灵节点”：没有闭合标签、不能嵌套、无法用伪类选中，CSS 只能通过 nth-child() 或显式设置每列属性来干预。
常见错误是写成这样：
<colgroup class="highlight-col"> <col> <col> <col> </colgroup>
然后期望 .highlight-col col { background: yellow; } 生效——实际完全无效。
-
<col>只响应width、span、style（内联）和部分 CSS 属性（如background-color），但不支持margin、padding、border等盒模型属性 - 所有
<col>必须在<colgroup></colgroup>内，且必须在<thead> 之前<li>如果表格有多个 <code><colgroup></colgroup>，浏览器按顺序合并列定义，后定义的会覆盖前定义的同位置列
用 JavaScript 动态生成 col 标签最可靠
手动写一堆 <col> 易出错、难维护，尤其列数多或需条件分组时。用 JS 批量创建并插入是最可控的方式：
const colgroup = document.querySelector('colgroup');
const columnCount = 8;
const groupDefs = [
{ start: 0, end: 2, style: 'background-color: #f0f8ff;' }, // 前3列
{ start: 3, end: 4, style: 'width: 120px;' }, // 第4列
{ start: 5, end: 7, style: 'background-color: #fff0f0;' } // 后3列
];
<p>// 清空原有 col（避免重复）
colgroup.innerHTML = '';</p><p>for (let i = 0; i i >= g.start && i </p>
- 注意
start/end是基于 0 的索引，且包含两端（闭区间） - 如果某列没匹配到任何分组，就生成无样式的
<col>，保持默认行为 - 不要用
innerHTML += <col>拼接——会触发多次 DOM 重排，性能差且可能清空已有绑定事件
用 CSS :nth-child() 替代 col 标签（适合静态分组）
如果列结构固定、无需动态变更，纯 CSS 更轻量。关键点：必须对 <td> 和 <code><th> 同时设置，否则表头/内容列样式错位：<pre class="brush:php;toolbar:false;">/* 第1–3列背景色 */
table tr td:nth-child(-n+3),
table tr th:nth-child(-n+3) {
background-color: #f0f8ff;
}
<p>/<em> 第5–6列加粗 + 固定宽度 </em>/
table tr td:nth-child(n+5):nth-child(-n+6),
table tr th:nth-child(n+5):nth-child(-n+6) {
font-weight: bold;
width: 100px;
}</p></pre>
<ul>
<li>
<code>nth-child() 计数的是当前行内的单元格，不是整表列序；但只要每行列数一致，效果等价
colspan）的场景，会导致计数偏移width 到 <col> 那样的渲染优先级——<td> 的 <code>width 是建议值，<col> 的 width 是强制基准colgroup 设置 width 时单位必须明确
<col> 的 width 属性只接受像素值（px）、百分比（%）或关键词（auto），不能省略单位，也不能用 em、rem、vw 等相对单位：
- ✅ 正确：
<col width="150">（等价于150px）、<col width="25%"> - ❌ 错误：
<col width="150px">（HTML 规范不允许多余单位，会被忽略）、<col width="2em">（无效） - JS 中设置推荐用
col.style.width = '150px'，而非col.setAttribute('width', ...)，更兼容现代渲染逻辑
列宽最终表现还受 table-layout: auto / fixed 影响：设为 fixed 时 <col> 的 width 才真正起决定作用；默认 auto 下浏览器会按内容撑开，<col> 仅作参考。
