css3 之表格隔行分色显示

最新推荐文章于 2025-05-16 11:44:09 发布

转载最新推荐文章于 2025-05-16 11:44:09 发布 · 144 阅读

本文展示了清华大学在理工学科领域的卓越表现，连续多次排名榜首。详细列出了排名、学校名称及类型，直观呈现了其在教育领域的领先地位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
    <title></title>
    <style type="text/css">
       table{
        width: 100%;
        font-size: 14px;    
        table-layout: fixed;
        empty-cells: show;
        border-collapse: collapse;
        margin: 0 auto; /*让table居中显示*/
        border: 1px solid #cad9ea;
        color: #666666;
       } 
       th{
        height: 30px;
        background-color: #cad9ea;    
       }
       td{
        height: 20px;    
       }
       td,th{
        border: 1px solid #cad9ea;    
        padding: 0 1em 0;
       }
       tr:nth-child(even){
        /*通过结构伪类选择器为表格内的偶数行定义背景色，以实现隔行分色显示效果*/
        background-color: #f5fafe;    
       }

    </style>
    </head>

    <body>
    <table>
        <tr>
        <th>排名</th>
        <th>校名</th>
        <th>学校类型</th>
        </tr>
        <tr>
        <td>1</td>
        <td>清华大学</td>
        <td>理工</td>
        </tr>
        <tr>
        <td>1</td>
        <td>清华大学</td>
        <td>理工</td>
        </tr>
        <tr>
        <td>2</td>
        <td>清华大学</td>
        <td>理工</td>
        </tr>
        <tr>
        <td>3</td>
        <td>清华大学</td>
        <td>理工</td>
        </tr>
    </table>
    </body>
</html>