分享一个Grid样式好看的表格

分类：Html_Css| 发布：camnprbubuol| 查看：1030 | 发表时间：2013/4/28

效果图：

CSS代码：

01#grid {font-family: "Georgia"; width:100%;height:340px; background-color:#f8f8f8; overflow:auto; display:inline-block;}
02#grid * {-moz-box-sizing: content-box;}
03#grid table{width:100%;font-size:13px;line-height:1.3em;text-align:center;border-collapse:separate;border-spacing:0;}
04#grid thead tr:last-child th {border-bottom-width: 0;}
05#grid tr:first-child th, #grid tr:first-child td {border-top: 1px solid #CCCCCC;}
06#grid th:first-child, #grid td:first-child{border-left: 1px solid #CCCCCC;}
07#grid table th, #grid table td{font-size:12px; height:22px; line-height:21px; outline-width:0; overflow:hidden; padding:0 4px; vertical-align: top;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;}
08#grid table thead th{background-color:#eee;color:#222;font-weight:bold;padding:2px 4px;white-space:nowrap;}
09#grid table tr.old{background-color:#fff}
10#grid table tr.even{background-color:#f5f5f5}

HTML代码：

1 <div id="grid"><table><thead><tr> <th><div>单位</div></th> <th><div>当日值（%）</div></th> <th><div>月累积值（%）</div></th> </tr> </thead> <tbody> <tr class="old"><td>朝阳分公司</td> <td>931.28</td> <td>32030.7132</td> </tr> <tr class="even"> <td>海淀分公司</td> <td>120.92</td> <td>9326.7793</td> </tr> <tr class="old"> <td>中心区分公司</td> <td>80.48</td> <td>38254.304</td> </tr> <tr class="even"> <td>南区分公司</td> <td>965.68</td> <td>80522.791</td> </tr> <tr class="old"> <td>西区分公司</td> <td>97.86</td> <td>20415.3873</td> </tr> <tr class="even"> <td>房山分公司</td> <td>113.42</td> <td>15455.9343</td> </tr> <tr class="old"> <td>通州分公司</td> <td>175.81</td> <td>16718.2509</td> </tr> <tr class="even"> <td>顺义分公司</td> <td>121.76</td> <td>9473.8923</td> </tr> <tr class="old"> <td>昌平分公司</td> <td>121.46</td> <td>20479.3796</td> </tr> <tr class="even"> <td>大兴分公司</td> <td>117.14</td> <td>3377.2994</td> </tr> <tr class="old"> <td>平谷分公司</td> <td>113.17</td> <td>3026.9699</td> </tr> <tr class="even"> <td>怀柔分公司</td> <td>123.57</td> <td>4592.4275</td> </tr> <tr class="old"> <td>密云分公司</td> <td>138.95</td> <td>4236.5902</td> </tr> </tbody> </table></div>

365据说看到好文章不转的人，服务器容易宕机！

标签：CSS CSS3 表格

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/html-css/637.html

分享一个Grid样式好看的表格

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

分享一个Grid样式 好看的表格

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

分享一个Grid样式好看的表格

想你所想爱你所爱