CSS实现table表格：隔行换色的效果

在CSS中，可以使用:nth-child伪类选择器来为表格的偶数行或奇数行设置不同的样式，从而实现隔行换色的效果。

下面是实现这种效果的CSS代码示例：




/* 设置奇数行的背景色 */
table tr:nth-child(odd) {
    background-color: #f2f2f2;
}
 
/* 设置偶数行的背景色 */
table tr:nth-child(even) {
    background-color: #ffffff;
}

在HTML中，你只需要确保使用<table>标签来包含你的数据，并且每行数据使用<tr>标签定义。




<table>
    <tr>
        <td>行1, 列1</td>
        <td>行1, 列2</td>
    </tr>
    <tr>
        <td>行2, 列1</td>
        <td>行2, 列2</td>
    </tr>
    <!-- 更多行... -->
</table>

上述CSS代码会使得表格的偶数行具有一个不同于奇数行的背景色，创建出隔行换色的视觉效果。

CSS实现table表格：隔行换色的效果

评论已关闭

推荐阅读