标签不支持background-color，因其不参与渲染；应使用th:nth-child(1), td:nth-child(1)分别设置表头与数据行首列背景色，并注意colspan对DOM顺序的影响。

直接用 td:nth-child(1) 和 th:nth-child(1) 选中首列

别碰 <col> 标签的 background-color，它压根不渲染，写了也白写。真正生效的是对单元格的选择器——必须同时命中 <td> 和 <code><th>，且区分表头与数据区。 <p>常见错误是只写 <code>td:nth-child(1)，结果表头没着色；或者写 tr td:first-child，但遇到 colspan 就失效（first-child 看的是 DOM 顺序，不是视觉列位置）。

• thead tr th:nth-child(1) 单独给表头首列设色，避免被 tbody 规则干扰
• tbody tr td:nth-child(1) 只作用于数据行，不会误染表头或页脚
• 如果表格有合并单元格（colspan），nth-child(1) 依然可靠——只要该 <td> 在父 <code><tr> 中确实是第一个子节点，就匹配成功 <h3>为什么不用 <code><col> 加 class 或 style？

  <col> 支持的样式极其有限：width、background（整张背景图或渐变）、极少数浏览器支持的 border。但 background-color、color、font-size、padding 全无效。你调试时看到 <col class="first-col"> 上写了 style="background-color: #333" 却没反应，第一反应不是“权重不够”，而是删掉它。

  它唯一靠谱的用途是 JS 标记或控制列宽，比如：<col class="fixed-width" width="120">。

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  立即学习“前端免费学习笔记（深入）”；

  首列加深常搭配的兼容性细节

  加深效果容易被边框“吃掉一圈”：当单元格同时有 background-color 和 border，边框会绘制在背景之上，视觉上颜色被裁切。解决办法很简单：

  • 加 border-collapse: collapse 到 <table>，消除默认间隙 <li>给 <code>td 和 th 显式设 padding，防止文字贴边
  • 若需边框颜色与背景协调，用 border-left 替代全边框，避免左右重复描边

  这个组合在 Chrome/Firefox/Safari/Edge 和 IE11 都稳定生效，无需前缀。

  动态表格里怎么保证首列始终加深？

  如果列数可能变化（比如后端返回字段不固定），硬写 nth-child(1) 没问题——它认的是 HTML 结构里的“第一个”，不是“左起第一列”。但要注意：如果某行开头是 <td colspan="2">，那它就算占了两列，仍算作 <code>nth-child(1)，后续单元格序号自动后移。此时首列加深会错位。

  更稳妥的做法是语义化标记：

  • 服务端渲染时给首列单元格加统一 class，如 <td class="key-col"> <li>或用 <code>data-role="id" 属性：<td data-role="id">，再配 CSS <code>td[data-role="id"]
  • JS 动态插入行时，确保首单元格带上对应 class 或属性

  纯 CSS 方案靠不住的地方，就是 colspan 和动态结构——这时候 class 或 data 属性才是真可靠。