COL标签无法直接设置背景色或边框，仅支持width、border（collapse模式下）和visibility: collapse；实现列背景色需通过:nth-child()选择单元格或JavaScript操作cells。
COL 标签本身不支持直接设置背景色或边框
很多人试过给 <col> 元素加 background-color 或 border，发现完全没效果——这不是你写错了，而是 CSS 规范明确限制：<col> 只能继承部分样式（如 border 仅在 border-collapse: collapse 下对列边界起作用），但 background-color、color、font-size 等一律不生效。
真正能用 <col> 控制的样式非常有限：
-
border：仅当表格设为border-collapse: collapse且相邻单元格边框合并时，<col>的border才可能影响列分隔线 -
width：这是<col>最稳定可靠的用途，可精确控制每列宽度 -
visibility: collapse：隐藏整列（比display: none更适合表格布局）
用 CSS 伪类 :nth-child() 给列上色更可靠
要实现“每列不同背景色”，实际生效的方式是选中该列下的所有 <td> 和 <th> 单元格。最常用、兼容性好（IE9+）的方法是结合 tbody tr 和 :nth-child(n)：
table td:nth-child(1), table th:nth-child(1) { background-color: #e0f7fa; }
table td:nth-child(2), table th:nth-child(2) { background-color: #f3e5f5; }
table td:nth-child(3), table th:nth-child(3) { background-color: #fff3cd; }
注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
td和th，否则表头颜色不会变 - 如果表格有
<thead>和<tbody>分离结构，:nth-child()是按每个<tr>内部子元素计数，不是全表列序，所以依然有效 - 避免用
tr:nth-child(n) td:nth-child(n)这类嵌套写法——它会匹配“第 n 行的第 n 列”，不是整列
用 colgroup + span 配合 class 控制复杂列样式
当列需要差异化处理（比如第 1–2 列同色、第 3 列单独色、第 4–5 列另一色），靠纯 :nth-child() 写起来冗长。这时可以用 <colgroup> 做语义分组，并给每组加 class，再用 CSS 定义：
<colgroup> <col class="data-col" span="2"> <col class="highlight-col"> <col class="note-col" span="2"> </colgroup>
然后写 CSS：
.data-col ~ td:nth-child(-n+2),
.data-col ~ th:nth-child(-n+2) { background-color: #e8f5e9; }
.highlight-col ~ td:nth-child(3),
.highlight-col ~ th:nth-child(3) { background-color: #ffecb3; }
.note-col ~ td:nth-child(n+4):nth-child(-n+5),
.note-col ~ th:nth-child(n+4):nth-child(-n+5) { background-color: #e0e0e0; }
这种写法可读性差、维护成本高，仅建议用于动态列数固定且需复用样式的场景。多数情况下，直接写死列号的 :nth-child() 更省心。
JavaScript 动态设列色时别忘了 col 的局限性
如果列数不确定或来自 API，要用 JS 动态加样式，切记不要尝试给 <col> 元素设 style.backgroundColor——它不会渲染。正确做法是遍历所有 tr，再遍历其 cells：
const colIndex = 1; // 想染色的列索引（从 0 开始）
document.querySelectorAll('table tbody tr, table thead tr').forEach(row => {
const cell = row.cells[colIndex];
if (cell) cell.style.backgroundColor = '#bbdefb';
});
注意：
-
row.cells是 live collection，比row.querySelectorAll('td, th')更高效 - 必须同时处理
<thead>和<tbody>中的行，否则表头漏染 - 若表格用了
colspan，row.cells[colIndex]可能对应错列——此时需按实际渲染列位置计算，逻辑复杂得多
列样式这件事，本质是“视觉列”和“DOM 结构”的错位。别被 <col> 的名字骗了，它只是个占位符，真干活还得靠单元格自己。
