CSS：设置表格奇偶行不同样式

最新推荐文章于 2024-08-15 00:06:54 发布

卡布达吃西瓜

最新推荐文章于 2024-08-15 00:06:54 发布

阅读量2.1k

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_46585382/article/details/130021418

版权

CSS设置表格奇偶行不同样式

样式

在这里插入图片描述

<html>
    <head>
        <title>
            demo
        </title>
        
        <style>
            /* 取消表格边框 */
            table{border-collapse:collapse;}
			
			/* 奇数行样式 */
            table tr:nth-child(odd) {
                background-color: blue;
                color: white;
            }
            
            /*  偶数行样式 */
            table tr:nth-child(even) {
                background-color: red;
                color: yellow;
            }
        </style>
    </head>
   
    <body>
        <table>
            <tr>
                <td>第一行</td> <td>第一行</td> <td>第一行</td>
            </tr>
            <tr>
                <td>第二行</td> <td>第二行</td> <td>第二行</td>
            </tr>
            <tr>
                <td>第三行</td> <td>第三行</td> <td>第三行</td>
            </tr>
            <tr>
                <td>第四行</td> <td>第四行</td> <td>第四行</td>
            </tr>
            <tr>
                <td>第五行</td> <td>第五行</td> <td>第五行</td>
            </tr>
        </table>
    </body>
</html>