col和colgroup不能直接设置文字颜色或背景色，因为col元素不承载内容，仅定义列结构属性，color、background-color等样式基本无效；可靠用法是配合border-collapse: collapse控制列宽和边框，文字样式需通过tbody td:nth-child(n)、thead th:nth-child(n)等选择器作用于单元格。
colgroup和col为什么不能直接设置文字颜色或背景色
因为 <col> 元素本身不承载内容，它只定义列的结构属性（如宽度、对齐），浏览器对它的样式支持非常有限：color、background-color、font-size 等 CSS 属性在 <col> 上基本无效（部分浏览器可能部分生效但不可靠）。真正起作用的是那些能“透传”到单元格的属性，比如 border 和某些 text-align 行为（仅当配合 table { border-collapse: collapse } 且有边框时才可见）。
用colgroup+col控制列宽和边框的可靠写法
这是 <colgroup></colgroup> 最稳定、最常用的场景。关键在于：必须配合 table { border-collapse: collapse }，否则列边框不会按预期渲染；同时，<col> 的 width 值会作为该列所有 <td>/<code><th> 的最小宽度基准（受内容撑开影响）。<p>示例：</p>
<pre class="brush:php;toolbar:false;"><style>
table { border-collapse: collapse; }
.col-1 { width: 80px; }
.col-2 { width: 120px; }
.col-3 { width: auto; }
</style><p></p></pre>
<table>
<colgroup>
<col class="col-1">
<col class="col-2">
<col class="col-3">
</colgroup>
<thead><tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr></thead>
<tbody><tr>
<td>1</td>
<td>Alice</td>
<td>a@b.com</td>
</tr></tbody>
</table>
<ul>
<li>
<code>width 可以是像素、百分比或 auto；auto 表示由内容决定，但受其他列约束
<col> 上（如 border-right: 1px solid #ccc），但只在 border-collapse: collapse 下可见<col> 写相同 class，而是用 :nth-child(n) 或独立 class 区分想给某一列文字加背景色？得绕到 tbody/tr/td 上
这是最容易踩坑的地方：很多人试图在 <col> 上写 background-color，结果没反应。正确做法是利用 CSS 选择器定位该列的所有单元格：
/* 给第2列（Name 列）所有 td/th 加背景色 */
tbody td:nth-child(2),
thead th:nth-child(2) {
background-color: #f5f5f5;
}
-
nth-child(n)从 1 开始计数，对应<col>的顺序 - 必须同时写
thead th和tbody td，否则表头或数据行样式不一致 - 如果表格有
rowspan或colspan，nth-child会失效——此时只能靠 JS 动态加 class 或改用data-col属性标记
colgroup放在哪里才生效？顺序和嵌套有硬性要求
<colgroup></colgroup> 必须紧接在 <table> 开始标签之后、且在任何 <code><caption></caption>、<thead>、<code><tbody> 之前。放错位置（比如插在 <code><thead> 里）会导致浏览器忽略整个 <code><colgroup></colgroup>。
- 合法顺序：
<table> <colgroup>...</colgroup> <caption>...</caption> <thead>...</thead> <tbody>...</tbody> </table> - 不能把
<colgroup></colgroup>包在<thead> 或 <code><tbody> 里<li>一个表格可有多个 <code><colgroup></colgroup>，但每个都必须符合上述位置规则
复杂点在于：当表格动态生成或含合并单元格时，<colgroup></colgroup> 定义的列数与实际渲染列数不一致，就容易出现样式偏移。这种时候，别硬扛，优先考虑用 CSS Grid 或 Flex 替代表格布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
