?

測試瀏覽器：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; }

?

轉載于:https://www.cnblogs.com/baixc/p/3512944.html

總結

以上是生活随笔為你收集整理的CSS3学习——设计优雅的数据表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。