table<tr><th>隔行变色
时间: 2024-05-06 19:13:05 浏览: 170
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
在HTML中,可以使用CSS来实现表格的隔行变色效果。具体实现方法如下:
1. 首先,在HTML中创建一个表格,并在表格中添加<tr>和<th>元素,用于定义表头行和表格行。
2. 在CSS中,使用:nth-child()选择器来选择需要变色的行。:nth-child()选择器可以选择指定位置的元素,可以通过设置不同的样式来实现隔行变色效果。
3. 通过设置不同的背景颜色或其他样式属性,来实现隔行变色效果。
下面是一个示例代码:
HTML代码:
```
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</table>
```
CSS代码:
```
table tr:nth-child(odd) {
background-color: #f2f2f2; /* 设置奇数行的背景颜色 */
}
table tr:nth-child(even) {
background-color: #ffffff; /* 设置偶数行的背景颜色 */
}
```
这样,表格的奇数行和偶数行就会有不同的背景颜色,从而实现了隔行变色效果。
阅读全文