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

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

效果图:

 

CSS代码:

#grid {font-family: "Georgia"; width:100%;height:340px; background-color:#f8f8f8; overflow:auto; display:inline-block;}
#grid * {-moz-box-sizing: content-box;}
#grid table{width:100%;font-size:13px;line-height:1.3em;text-align:center;border-collapse:separate;border-spacing:0;}
#grid thead tr:last-child th {border-bottom-width: 0;}
#grid tr:first-child th, #grid tr:first-child td {border-top: 1px solid #CCCCCC;}
#grid th:first-child, #grid td:first-child{border-left: 1px solid #CCCCCC;}
#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;}
#grid table thead th{background-color:#eee;color:#222;font-weight:bold;padding:2px 4px;white-space:nowrap;}
#grid table tr.old{background-color:#fff}
#grid table tr.even{background-color:#f5f5f5}

HTML代码:

单位
当日值(%)
月累积值(%)
朝阳分公司 931.28 32030.7132
海淀分公司 120.92 9326.7793
中心区分公司 80.48 38254.304
南区分公司 965.68 80522.791
西区分公司 97.86 20415.3873
房山分公司 113.42 15455.9343
通州分公司 175.81 16718.2509
顺义分公司 121.76 9473.8923
昌平分公司 121.46 20479.3796
大兴分公司 117.14 3377.2994
平谷分公司 113.17 3026.9699
怀柔分公司 123.57 4592.4275
密云分公司 138.95 4236.5902

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/html-css/637.html