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>
效果图：