colgroup 必须作为 table 的直接子元素且位于 caption 之后、thead 之前才生效；col 仅支持 width、text-align、border（collapse 模式）和 visibility: collapse 等有限样式，背景色等需通过 nth-child 或 class 实现。
colgroup 必须放在 table 开头、thead 之前才生效
直接把 <colgroup> 写在 <thead> 后面，或者夹在 <tr> 之间，浏览器会忽略它——DOM 中根本不会渲染出 <col> 节点。<colgroup> 只能是 <table> 的直接子元素，且必须出现在 <caption>（如果有）之后、<thead> / <tbody> / <tr> 之前。
常见错误现象：width 不起作用、class 没效果、开发者工具里看不到 <col> 元素。检查 DOM 结构就能立刻定位问题。
-
<colgroup>和它内部的<col>数量，必须与表格实际列数一致；多写或少写一列，后续所有列样式都会错位 - 多个
<colgroup>可以并存，但它们按顺序从左到右依次覆盖列，不能跳列 - 如果用了
<col span="2">，它占两列，下一个<col>就从第三列开始算
col 上哪些 CSS 属性真正有效
<col> 不渲染内容，CSS 规范只允许它继承极少数属性。别指望 background-color、color、font-size、padding 能生效——写了也白写，部分浏览器“看起来”有效，实则是 bug 级透传，行为不可靠。
真正稳定可用的只有：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
width：仅在table-layout: fixed下起主导作用；默认auto模式下常被内容撑开 -
text-align：对整列<td>/<th>生效（继承机制） -
border：仅在border-collapse: collapse时影响列分隔线，不是单元格边框 -
visibility: collapse：隐藏整列，且不占位（区别于hidden）
想设背景色？别碰 col，改用 nth-child
给列加背景色最稳妥的方式，是绕过 <col>，直接选中单元格：td:nth-child(2)、th:nth-child(2)。注意两点：
- 必须同时写
td和th，否则表头或数据行背景会不一致 -
:nth-child(n)是“第 n 个子元素”，不是“第 n 列”——如果某行开头有colspan单元格，序号会偏移，容易翻车 - 更健壮的做法是给每列单元格加
data-col="name"或统一 class，比如<td class="col-age">，再用.col-age控制样式
用 colgroup + class 做语义化钩子
虽然 <col class="status-col"> 自身不显示样式，但它可以作为 CSS 选择器的锚点，配合后代选择器精准控制对应列：
<colgroup> <col class="id-col"> <col class="name-col"> <col class="action-col"> </colgroup>
然后写：
.id-col ~ td:nth-child(1),
.id-col ~ th:nth-child(1) { width: 60px; }
.action-col ~ td:nth-child(3),
.action-col ~ th:nth-child(3) { background: #ffebee; }
这种写法比纯 :nth-child() 更易维护，但前提是 <col> 数量和位置严格匹配表格结构——列数动态变化时，这套机制就容易崩。
复杂表格里，列样式逻辑一旦涉及响应式、条件渲染或动态列增删，<colgroup> 很快变成维护负担。这时候老老实实用 data-col-id 或每单元格加 class，反而更稳。
