CSS中不同背景颜色的表格标题单元格（ th ）答案

【问题标题】：Table header cells ( th ) in different background color in CSSCSS中不同背景颜色的表格标题单元格（ th ）
【发布时间】：2015-02-19 04:28:12
【问题描述】：

我有以下 CSS 样式以正确格式显示表格数据，但我想以不同颜色显示表格标题 (th) 的备用背景...

如何仅在 CSS 下方进行修改以达到相同的效果即每个 TH3、TH5 都应该有蓝色背景（除了第一个 TH1 - 它的默认背景为红色）而 TH2,TH4,TH6 应该有黄色背景。

我已经尝试过第 n 个子选择器，但在某处我读到过 th+th 两种方法都不起作用。

 <style type="text/css">
    table {
           /*...all table attributes like fontsize etc*/
            font-size:11px;
            color:#333333;                
    }
    table th {
            /*...all th attributes like padding etc*/
            background-color:#d4e3e5;
            padding: 8px;
    }
    table td {
            /*...all td attributes like padding etc*/
            padding: 8px;
    }
    </style>

感谢所有回复，但第 n 个子选择器不起作用，我已经尝试过。有没有什么基本的方法可以修改 CSS 并达到同样的效果？

【问题讨论】：

使用 th:nth-child(odd) 和 th:nth-child(even)
感谢信息！！ @PRAH 我已经告诉我第 n 个子选项在我的 CSS 中不起作用。
你可以为它创建jsffidler吗，你也可以指出你正在测试的浏览器和版本
@PRAH .. 实际上，上面的 CSS 是由我的 unix 脚本调用的 jar 文件调用的。所以我很害怕我将能够提供 jsffidler。
您可以使用th+th... 语法，这会很乏味，但工作...

标签： css tableheader

【解决方案1】：

fiddle

nth-child 正在工作。

 th:nth-child(odd) {
     background-color:red; // Replace it with your desired color
 }

 th:nth-child(even) {
     background-color: yellow;
 }

如果您还有问题，请发布您的 HTML 和 CSS。

【讨论】：

【解决方案2】：

你也可以试试这个

table th:odd {
    background-color:#000; //Replace it with your desired color
}

table th:odd {
    background-color:#f00; //Replace it with your desired color
}

或者您可以尝试选择第 n 个元素。

th:nth-child(n) {
    background-color:red; // Replace it with your desired color
}

【讨论】：

【解决方案3】：

试试这个。

th:nth-child(odd) { 
    background-color:blue; 
}

th:nth-child(even) {
     background-color:yellow; 
}

<!DOCTYPE html>
<html>
<head>
    <style>
        th:nth-child(odd){ background-color:blue; }
        th:nth-child(even){ background-color:yellow; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>heading</th>
            <th>heading1</th>
        </tr>
        <tr>
            <td>xxx</td>
            <td>yyy</td>
        </tr>
        <tr>
            <td>xxx1</td>
            <td>yyy1</td>
        </tr>
    </table>
</body>
</html>

【讨论】：