CSS:如何自定义由奇数和偶数分隔的标题行的背景？
CSS:如何自定义由奇数和偶数分隔的标题行的背景？
提问于 2020-05-07 05:18:34
在CSS html表格样式设计中，我们可以通过color定制标题行的字体颜色，在thead中通过background-color定制背景。这是一个例子。
thead {
color: #555555;
background-color: #f7f8f9;
}我的困惑是，我们能否以分离的方式自定义标题的背景。比如奇数在中，甚至在red中。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-07 05:53:17
请尝试以下几个重要部分：
th:nth-child(odd) { background-color: blue; }
th:nth-child(even) { background-color: red; }
<!DOCTYPE html>
<html>
<head>
<style>
th:nth-child(odd) { background-color: blue; }
th:nth-child(even) { background-color: red; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem</td>
<td>ipsum</td>
<td>amet</td>
<td>jabar</td>
<td>foobar</td>
</tr>
</tbody>
</table>
</body>
</html>
取自https://www.w3.org/Style/Examples/007/evenodd.en.html
希望能帮上忙。
Stack Overflow用户
发布于 2020-05-07 05:43:26
thead实际上是HTML中的一行。因此，您不能使用CSS中的选择器访问tr和td。
另一方面，如果要将行的背景设置为条带，则可以为此使用CSS3 3的:nth-of-type(even)和:nth-of-type(odd) selectors。
HTML：
<table >
<thead>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</thead>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</table>CSS：
table, th, td {
border: 1px solid #888;
}
tr:nth-of-type(odd){
background-color: #00f;
}
thead, tr:nth-of-type(even){
background-color: #f00;
}Stack Overflow用户
发布于 2020-05-07 08:42:26
您可以使用jQuery来解决这个问题。注意，在执行此操作时，需要添加jQuery脚本。如果您还没有使用Visual，您可以从NuGet下载它。
HTML代码：
<div>
<table>
<tr>
<td>Even</td>
</tr>
<tr>
<td>Odd
</td>
</tr>
<tr>
<td>Even</td>
</tr>
<tr>
<td>Odd</td>
</tr>
<tr>
<td>Even</td>
</tr>
</table>
</div>CSS:
.zebra {
background-color: blue;
color: white;
}
.zebra1 {
background-color: red;
color: white;
}JAVASCRIPT:
<script src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("tr:even").addClass("zebra1"); //This code makes gives all even rows in the table the class of zebra1
$("tr:odd").addClass("zebra"); //This code makes all the odd rows in the table the class of zebra
});这个jQuery使斑马和zebra1的类分别附加到表的奇数行和偶数行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61650401
复制相关文章
相似问题
腾讯云开发者
