colgroup 无法可靠设置列背景色，因 col 是替换元素不参与视觉渲染；应使用 th:nth-child(n), td:nth-child(n) 设置单元格背景色，或用 colgroup 控制列宽、隐藏列等语义化场景。

colgroup

本身不能可靠设置列背景色，别白费劲给 写 style="background-color: ..." —— 大部分浏览器压根不渲染它，尤其 Firefox 完全忽略。

为什么 col 的 background-color 经常失效

是替换元素，只参与表格布局计算，不参与视觉渲染流。background-color 在规范中属于“装饰性样式”，必须作用于实际渲染的 或 才能生效。即使你看到 Chrome 里偶尔“生效”，那也只是巧合：整列有内容、触发了列渲染上下文、且没被单元格自身样式覆盖。这不是稳定行为，生产环境必须规避。

真正能跨浏览器生效的列背景控制方式

• 用 :nth-child() 直接选中目标列的所有单元格：th:nth-child(2), td:nth-child(2) { background-color: #e6f7ff; }
• 如果列有逻辑分组（比如“用户信息”占前3列），用 做语义标记，再配合 th:nth-child(-n+3), td:nth-child(-n+3) 选中
• 避免用 :nth-of-type()：因为 和 是不同标签，序列会被打断，第2个 不等于第2列
• 确保 和 没写死 background-color，或显式设为 background-color: transparent

  colgroup 还值得用吗？什么场景下它真有用

  值得用，但只用在它真正擅长的地方：

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  • 控制列宽：配合 table { table-layout: fixed; } + ，能稳定约束列宽
  • 隐藏整列： 比 display: none 更语义化，且不影响表结构
  • 无障碍和 JS 控制：通过 document.querySelector('#user-cols').span 获取列范围，供动态列操作使用
  • 别给 或 加 class 或 style 试图控制字体、颜色、padding——这些属性根本不会生效
  列背景色这事，本质是 CSS 选择器问题，不是 HTML 结构问题。把精力放在写对 :nth-child() 上，比反复调试 的 background 强十倍。

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