HTML表格怎么定义不同列的背景色（操作指南）-html教程-PHP中文网

标签设置background-color无效，因其不渲染为可视元素；应使用nth-child()或nth-last-child()选择对应列的和元素来设置背景色。

html表格怎么定义不同列的背景色（操作指南）

col标签上写background-color根本无效

直接在<col>里加style="background-color: red;"不会起作用——这不是你写错了，是浏览器按规范故意忽略它。<col>不渲染为可视元素，background-color这种装饰性样式对它完全失效。你刷新页面看不到颜色，不是CSS优先级问题，也不是缓存，而是它压根没被渲染引擎处理。

用`nth-child()`选中整列单元格才真正生效

要给第2列统一设背景色，必须命中所有<td>和<code><th>，且不能误伤表头或跨行单元格。关键点有三个： <ul> <li>必须限定在<code>tbody里写tr td:nth-child(2)，否则thead th也会被选中（除非你真想一起着色）

表头要单独加thead tr th:nth-child(2)，因为th不在tbody里

别用tr > td:nth-child(2)——>子选择器遇到colspan会断掉，nth-child(2)依然可靠，只要HTML里该列的

<td>确实是父元素下第二个子节点

<p>示例：</p>
<pre class="brush:php;toolbar:false;">tbody tr td:nth-child(2) {
  background-color: #e6f7ff;
}
thead tr th:nth-child(2) {
  background-color: #bae7ff;
}</pre>

<h3>最后两列（比如周六、周日）用<code>nth-last-child()

更安全

如果列数不固定，或者表格结构可能动态增减列，硬写nth-child(6)容易错位。此时用nth-last-child(-n+2)更鲁棒：

Doc To HTML

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

下载

table th:nth-last-child(-n+2), table td:nth-last-child(-n+2) —— 精准匹配倒数第1、第2个单元格
不用关心总列数，也不依赖colgroup是否完整
注意：这个选择器会同时命中thead和tbody里的目标单元格，无需拆开写

兼容性没问题，Chrome/Firefox/Safari/Edge 全支持，IE11也行。

别碰`col`的class或style来设背景

<col class="weekend">可以，但仅用于JS标记或控制width；style="background-color: red"写了等于白写。有效属性只有：width、background（整个背景图/渐变，不是单色）、极少数浏览器支持的border。其他如color、font-size、padding全无效。调试时看到col上写了background-color却没反应，第一反应不该是“是不是权重不够”，而是删掉它。