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

pan_junbiao

已于 2024-08-21 14:58:03 修改

阅读量1.1k

点赞数 2

分类专栏： CSS3 我の原创文章标签： css 前端

于 2024-07-12 18:29:20 首次发布

本文链接：https://blog.csdn.net/pan_junbiao/article/details/140386218

版权

我の原创同时被 2 个专栏收录

528 篇文章 28 订阅

订阅专栏

CSS3

14 篇文章 1 订阅

订阅专栏

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。推荐博文：《HTML中Table表格的使用》

在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。示例如下：

<style>
    /* 奇数行的颜色 */
    table tbody tr:nth-child(odd) {
        background-color: #EFF3F5;
    }

    /* 偶数行的颜色 */
    table tbody tr:nth-child(even) {
        background-color: #FFFFFF;
    }
</style>

实例效果：

【实例】使用CSS样式实现 table 表格隔行换色的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>隔行换色的效果</title>

    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        table,table tr th,table tr td {
            border: 1px solid #ddd;
            text-align: center;
            padding: 10px;
        }

        /* 表头的颜色 */
        table tbody th{
            background-color:#64A1D7;
        }
        
        /* 奇数行的颜色 */
        table tbody tr:nth-child(odd) {
            background-color: #EFF3F5;
        }

        /* 偶数行的颜色 */
        table tbody tr:nth-child(even) {
            background-color: #FFFFFF;
        }
    </style>

</head>

<body>
    <table>
        <tr>
            <th>序号</th>
            <th>博客信息</th>
            <th>博客地址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td>2</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td>3</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td>4</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
        <tr>
            <td>5</td>
            <td>您好，欢迎访问 pan_junbiao的博客</td>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
    </table>
</body>

</html>