下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#table1 {
width: 100%;
}
thead {
background-color: black;
color: white;
text-indent: 14px;
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: rgba(0, 255, 0, 0.1); /* green, 10% alpha */
}
tbody tr:nth-child(even) {
background-color: rgba(255, 0, 0, 0.3); /* red, 30% alpha */
}
</style>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
</tr>
<tr>
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
</tr>
<tr>
<td>Row 7, Column 1</td>
<td>Row 7, Column 2</td>
</tr>
<tr>
<td>Row 8, Column 1</td>
<td>Row 8, Column 2</td>
</tr>
</tbody>
</table>
</body>
</html>
源码下载：
alternating-row-colors-in-a-table-in-html5.zip
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
