HTML5中更迭变换表格的行颜色
日期：2014-05-17 浏览次数：20662 次
HTML5中交替变换表格的行颜色
下面的例子展示了你如何交替展示表格的行的颜色。使用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
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
