表格奇偶行颜色不同html

最新推荐文章于 2024-07-12 18:29:20 发布

丁七岁

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量2.9k

点赞数 5

分类专栏： HTML 文章标签： html css css3

本文链接：https://blog.csdn.net/qq_43612538/article/details/108628723

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>表格奇偶行颜色不同html</title>
        <style type="text/css">
            table {
                width: 60%;
                margin: 0 auto;
                border: 1px solid black;
                border-collapse: collapse;
            }

            td {
                border: 1px solid black;
                height: 52px;
                text-align: center;
            }

            tr:nth-child(odd) {
                background-color: #a67e3b;
            }

            tr:nth-child(even) {
                background-color: #888888;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>姓名</td>
                <td>班级</td>
                <td>性别</td>
                <td>成绩</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
            <tr>
                <td>丁七岁</td>
                <td>云计算2班</td>
                <td>男</td>
                <td>S++</td>
            </tr>
        </table>
    </body>
</html>