CSS CSS中不同背景颜色的表格标题单元格（th）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28598601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table header cells ( th ) in different background color in CSS
提问by
I have following CSS style to show table data in proper format , but I want to display alternate background of table header ( th ) in different color...
我有以下 CSS 样式以正确的格式显示表格数据，但我想以不同的颜色显示表格标题（ th ）的替代背景......
How can I modify only below CSS to achieve the same i.e every TH3,TH5 should have blue background ( except the first one TH1 - it will have default background of red ) while TH2,TH4,TH6 should have yellow background.
如何仅在 CSS 下方修改以实现相同的效果，即每个 TH3、TH5 都应具有蓝色背景（第一个 TH1 除外 - 它将具有默认的红色背景），而 TH2、TH4、TH6 应具有黄色背景。
I have already tried nth child selector and somewhere I read about th+th both ways are not working.
我已经尝试过第 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>
Thanks for all reespons but nth child selector is not working and I have alerdy tried that. Is there any basic way to modify the CSS and achieve the same?
感谢所有回复，但第 n 个子选择器不起作用，我已经尝试过。是否有任何基本的方法来修改 CSS 并实现相同的目标？
回答by Gibbs
回答by Shoeb Ansari
You can also try this
你也可以试试这个
table th:odd {
background-color:#000; //Replace it with your desired color
}
table th:odd {
background-color:#f00; //Replace it with your desired color
}
Or you can try selecting of nth element.
或者您可以尝试选择第 n 个元素。
th:nth-child(n) {
background-color:red; // Replace it with your desired color
}
回答by Sathish
try this.
尝试这个。
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>