建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
CSS
* { margin: 0; padding: 0; } body { padding: 10px 30px; } table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; width: 100%; } caption { /*设置表格标题 */ padding: 0 0 5px 0; text-align: center; /*水平居中*/ font-size: 30px; /*字体大小*/ font-weight: bold; /*字体加粗*/ } /*----------------------*/ .table td, .table th { padding: 4px; border-bottom: 1px solid #f2f2f2; text-align: left; font-weight:normal; } .table tbody tr:nth-child(even) { background: #f5f5f5; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; } .table thead th { text-shadow: 0 1px 1px rgba(0,0,0,.1); border-bottom: 1px solid #ccc; background-color: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee)); background-image: -webkit-linear-gradient(top, #f5f5f5, #eee); background-image: -moz-linear-gradient(top, #f5f5f5, #eee); background-image: -ms-linear-gradient(top, #f5f5f5, #eee); background-image: -o-linear-gradient(top, #f5f5f5, #eee); background-image: linear-gradient(to top, #f5f5f5, #eee); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee)"; } .table thead th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .table thead th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .table tfoot td { border-bottom: 0; border-top: 1px solid #fff; background-color: #f1f1f1; } .table tfoot td:first-child, .table tfoot th:first-child{ -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .table tfoot td:last-child,.table tfoot th:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }
-
HTML
<table summary="历届奥运会中国奖牌数"> <caption> 历届奥运会中国奖牌数 </caption> <thead> <tr> <th>编号</th> <th>年份</th> <th>城市</th> <th>金牌</th> <th>银牌</th> <th>铜牌</th> <th>总计</th> </tr> </thead> <tbody> <tr> <th>第23届</th> <td>1984年</td> <td>洛杉矶(美国)</td> <td>15</td> <td>8</td> <td>9</td> <td>32</td> </tr> <tr> <th>第24届</th> <td>1988年</td> <td>汉城(韩国)</td> <td> 5</td> <td>11</td> <td>12</td> <td>28</td> </tr> <tr> <th>第25届</th> <td>1992年</td> <td>巴塞罗那(西班牙)</td> <td>16</td> <td>22</td> <td>16</td> <td>54</td> </tr> <tr> <th>第26届</th> <td>1996年</td> <td>亚特兰大(美国)</td> <td>16</td> <td>22</td> <td>12</td> <td>50</td> </tr> <tr> <th>第27届</th> <td>2000年</td> <td>悉尼(澳大利亚)</td> <td>28</td> <td>16</td> <td>14</td> <td>58</td> </tr> <tr> <th>第28届</th> <td>2004年</td> <td>雅典(希腊)</td> <td>32</td> <td>17</td> <td>14</td> <td>63</td> </tr> <tr> <th>第29届</th> <td>2008年</td> <td>北京(中国)</td> <td>51</td> <td>21</td> <td>28</td> <td>100</td> </tr> <tr> <th>第30届</th> <td>2012年</td> <td>伦敦(英国)</td> <td>38</td> <td>27</td> <td>23</td> <td>88</td> </tr> <tr> <th>第31届</th> <td>2016年</td> <td>里约热内卢(巴西)</td> <td>26</td> <td>18</td> <td>26</td> <td>70</td> </tr> </tbody> <tfoot> <tr> <th>合计</th> <td colspan="6">543枚</td> </tr> </tfoot> </table>