colgroup 设置背景色无效是因为 col 元素不渲染为可视盒子，css 背景属性对其无作用；必须通过 td/th 选择器（如 :nth-child(n) 或 data-col 属性）将背景应用到实际单元格上。

colgroup 设置背景色为什么无效？

直接给 <col> 或 <colgroup></colgroup> 设置 background-color 不生效，是因为 <col> 元素本身不渲染为可视盒子，CSS 背景属性对其无作用。浏览器只支持通过 <col> 控制宽度、边框（部分）、对齐等继承性样式，但背景必须“透传”到实际单元格上。

用 colgroup + class 配合 td/th 选择器实现列级背景

核心思路是：用 <colgroup></colgroup> 标记列结构，再通过 CSS 选择器定位对应列的单元格。关键在于利用 :nth-child(n) 或类名绑定。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 给 <col> 添加 class（如 class="col-highlight"），仅作语义标记，不依赖其样式
• 在 CSS 中写 td.col-highlight, th.col-highlight —— 但这需要手动给每个 <td> 加 class，不推荐 <li>更可靠的是用列号定位：<code>td:nth-child(2), th:nth-child(2) { background-color: #f0f8ff; }，其中 2 对应第二列
• 若表格有 <thead> 和 <code><tbody>，需分别写选择器，或统一用 <code>tr > :nth-child(2)

  colgroup 宽度设置会影响 nth-child 定位吗？

  不会。<colgroup></colgroup> 的 width 属性（如 <col width="120">）只影响布局计算，不改变 DOM 结构顺序，:nth-child(n) 始终按 HTML 中 <td> 的实际位置计数，与 <code><col> 数量和宽度无关。

  • 确保 <colgroup></colgroup> 中 <col> 的数量与每行单元格数一致，否则列对齐可能错乱
  • 如果某行用了 colspan，:nth-child(n) 仍按原始列序计算，不是按视觉列位置
  • 动态插入行时，只要新 <tr> 内 <code><td> 数量匹配，样式自动生效 <h3>兼容性与性能注意点</h3> <p><code>:nth-child() 在 IE9+ 支持良好，但 IE8 及更早版本不支持 —— 若需兼容，只能退化为 JS 遍历或服务端生成 class。
    • 避免在大表格（>1000 行）中对每一列都写独立的 :nth-child(n) 规则，CSS 解析开销会上升
    • 更高效的做法是用一个通用类 + data-col 属性：<td data-col="2">，再写 <code>[data-col="2"] { background: ... }
    • <colgroup></colgroup> 必须紧接在 <table> 开始后、<code><thead> 或第一行 <code><tr> 之前，否则被忽略 <p>真正起作用的永远是 <code><td> 和 <code><th> 的样式，<code><colgroup></colgroup> 只是帮你理清列意图的“说明书”，别指望它自己上色。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！