青岛网站建设新闻资讯

HTML使用CSS实现表格隔行变色

时间:2022-11-07 已阅读:191次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

 :nth-child(n) 选择器匹配父元素中的第n个子元素。n可以是一个数字,一个关键字,或者一个公式

隔行变色公式:

偶数:        :nth-child(2n)

奇数:        :nth-child(2n-1)

<style>
 
        table{
 
            /* border: 1px solid gainsboro; */
 
            border-collapse: collapse;      /*合并单元格的边框 */
 
            width: 800px;
 
            text-align: center;
 
        }
 
        th,td{
 
            /* border: 1px solid gainsboro; */
 
            height: 30px;
 
        }
 
        /* th{
            border: none;                /*没有边框*/
 
        } */
 
        thead tr{
 
            background-color: #000;
 
            color: #fff;
 
        }
 
        td{
 
            border-bottom: 1px solid red;
 
        }
 
        tbody tr:nth-child(2n){
 
            background-color: rgb(112, 198, 231);
 
        }
 
        tbody tr:nth-child(2n):hover{
 
            background-color: rgb(54, 221, 152);
 
        }
 
        tbody tr:hover{
 
            background-color: rgb(247, 133, 203);
 
        }
 
    </style>



二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1342.html

相关资讯

我有建站需求

*请正确填写需求信息,我们最快会在1小时内与您取得联系!
注:如果想获取实时咨询报价,您可以拔打业务经理手机186-5321-9163或扫码添加客户经理微信咨询。

Copyright © 2022 青岛青华互联网站建设公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图