带有条纹的表格也非常经典。当表格行数较多时,这样的表格比传统网格状表格更能看得清楚。这个效果就是通过在<tr>上调用CSS3选择器nth-child(odd)完成的。这儿的传入参数可以是一个表达式(an+b),或者build-in的函数,比如odd表示奇数(2n+1),而even是偶数(2n)。
【示例】
-
HTML
<table> <caption> IE浏览器发展大事记 </caption> <thead> <tr> <th>版本</th> <th>发布时间</th> <th>绑定系统</th> </tr> </thead> <tbody> <tr> <td>Internet Explorer 1</td> <td>1995年8月</td> <td>Windows 95 Plus! Pack</td> </tr> <tr> <td>Internet Explorer 2</td> <td>1995年11月</td> <td>Windows和Mac</td> </tr> <tr> <td>Internet Explorer 3</td> <td>1996年8月</td> <td>Windows 95 OSR2</td> </tr> <tr> <td>Internet Explorer 4</td> <td>1997年9月</td> <td>Windows 98</td> </tr> <tr> <td>Internet Explorer 5</td> <td>1999年3月</td> <td>Windows 98 Second Edition</td> </tr> <tr> <td>Internet Explorer 5.5</td> <td>2000年9月</td> <td>Windows Millennium Edition</td> </tr> <tr> <td>Internet Explorer 6</td> <td>2001年10月</td> <td>Windows XP</td> </tr> <tr> <td>Internet Explorer 7</td> <td>2006年下半年</td> <td>Windows Vista</td> </tr> <tr> <td>Internet Explorer 8</td> <td>2009年3 月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 9</td> <td>2011年3月</td> <td>Windows 7</td> </tr> <tr> <td>Internet Explorer 10</td> <td>2012年</td> <td>Windows 8</td> </tr> <tr> <td>Internet Explorer 11</td> <td>2013年6月</td> <td>Windows 8.1</td> </tr> <tr> <td>Spartan浏览器</td> <td>2015年3月</td> <td>Windows 10</td> </tr> </tbody> </table>
-
CSS
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; width:100%; } caption { font-size: larger; margin: 1em auto; } th, td { padding: .65em; } th { background: #555; border: 1px solid #777; color: #fff; } td { border: 1px solid #777; } tbody tr:nth-child(odd) { background: #ccc; }