首页 前端知识 CSS实现table表格:隔行换色的效果

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

2024-08-30 02:08:49 前端知识 前端哥 850 992 我要收藏

表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17146.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!