分享一个Grid样式 好看的表格
效果图：
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
相关文章
- 纯css的标签背景(2013-4-24 13:27:41)
- Photoshop插件将Shapes转换为CSS3代码(2012-8-20 14:6:8)
- chrome developer tool 调试技巧(2012-7-30 14:54:57)
- IE6对多个CSS样式的解析(2012-2-2 11:16:51)
- css选择器命名规则:差异及可能产生的问题(2012-2-2 10:14:33)
- CSS精灵图片(CSS sprite)使用心得(2011-9-25 11:36:22)
- 关于CSS中@font-face 嵌入字体的用法 客户端没有字体 自动下载字体(2011-6-21 10:1:23)
- CSS Sprites 样式生成工具 3.0(图片定位坐标)(2011-6-20 15:44:43)
- JS中style属性(2011-5-23 16:45:9)
- 推荐12个漂亮的CSS3按钮实现方案(2011-5-16 9:27:50)
