css3 之表格隔行分色显示 

<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>

效果图：

posted @ 2013-10-15 12:50  yshy  阅读(964)  评论(0)  编辑  收藏  举报