CSS3学习——设计优雅的数据表格

 

测试浏览器：Chrome30.0、Firefox 26.0、IE9-11、Opera 18.0、Safari 5.1.7

 

<table summary="设计优雅的数据表格">
        <tr>
            <th>排名</th>
            <th>校名</th>
            <th>总得分</th>
            <th>人才培养总得分</th>
            <th>研究生培养得分</th>
            <th>本科生培养得分</th>
            <th>学校类型</th>
        </tr>
                <tr>
            <td>1</td>
            <td>清华大学</td>
            <td>294.2</td>
            <td>123</td>
            <td>82</td>
            <td>94</td>
            <td>理工</td>
        </tr>
                ...
</table>

h1{font-size: 16px;}
table{        /* 色彩恬淡的细表格是设计的主流 */
    width: 100%;
    font-size: 12px;
    margin: 0 auto;
    border: 1px solid #cad9ea;
    color: #666;
    table-layout: fixed;/* 改善表格呈现性能 */
    empty-cells: show;/* 隐藏不必要的干扰因素 */
    border-collapse: collapse;/* 让表格看起来更精致 */
}
th{
    background-color: #eee;
    height: 30px;
    overflow: hidden;
}
td{height: 20px;}     /* 适当撑起单元格，让数据看起来更轻松 */
td,th{
    border: 1px solid #cad9ea;
    padding: 0 1em 0;
}
/* 本案例的关键，通过结构伪类选择器为偶数行定义背景色 */
tr:nth-child(even){
    background-color: #f5fafe;
}