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

浏览数：48 / 时间：2015年06月09日

 

测试浏览器：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;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 数据 学习 c css 设计 cs 数据 学习 c css 设计 cs

相关文章

随机文章

您可能还喜欢

您可能还喜欢