《HTML5+CSS3 表格设计(Table).doc》由会员分享，可在线阅读，更多相关《HTML5+CSS3 表格设计(Table).doc（8页珍藏版）》请在金锄头文库上搜索。
1、CSS样式：cssview plaincopy1. 2. 3. body4. width:600px;5. margin:40pxauto;6. font-family:trebuchetMS,Lucidasans,Arial;7. font-size:14px;8. color:#444;9. 10. 11. table12. *border-collapse:collapse;/*IE7andlower*/13. border-spacing:0;14. width:100%;15. 16. 17. .bordered18. border:solid#ccc1px;19. -moz-bor
2、der-radius:6px;20. -webkit-border-radius:6px;21. border-radius:6px;22. -webkit-box-shadow:01px1px#ccc;23. -moz-box-shadow:01px1px#ccc;24. box-shadow:01px1px#ccc;25. 26. 27. .borderedtr:hover28. background:#fbf8e9;29. -o-transition:all0.1sease-in-out;30. -webkit-transition:all0.1sease-in-out;31. -moz
3、-transition:all0.1sease-in-out;32. -ms-transition:all0.1sease-in-out;33. transition:all0.1sease-in-out;34. 35. 36. .borderedtd,.borderedth37. border-left:1pxsolid#ccc;38. border-top:1pxsolid#ccc;39. padding:10px;40. text-align:left;41. 42. 43. .borderedth44. background-color:#dce9f9;45. background-i
4、mage:-webkit-gradient(linear,lefttop,leftbottom,from(#ebf3fc),to(#dce9f9);46. background-image:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);47. background-image:-moz-linear-gradient(top,#ebf3fc,#dce9f9);48. background-image:-ms-linear-gradient(top,#ebf3fc,#dce9f9);49. background-image:-o-linear-grad
5、ient(top,#ebf3fc,#dce9f9);50. background-image:linear-gradient(top,#ebf3fc,#dce9f9);51. -webkit-box-shadow:01px0rgba(255,255,255,.8)inset;52. -moz-box-shadow:01px0rgba(255,255,255,.8)inset;53. box-shadow:01px0rgba(255,255,255,.8)inset;54. border-top:none;55. text-shadow:01px0rgba(255,255,255,.5);56.
6、 57. 58. .borderedtd:first-child,.borderedth:first-child59. border-left:none;60. 61. 62. .borderedth:first-child63. -moz-border-radius:6px000;64. -webkit-border-radius:6px000;65. border-radius:6px000;66. 67. 68. .borderedth:last-child69. -moz-border-radius:06px00;70. -webkit-border-radius:06px00;71.
7、 border-radius:06px00;72. 73. 74. .borderedth:only-child75. -moz-border-radius:6px6px00;76. -webkit-border-radius:6px6px00;77. border-radius:6px6px00;78. 79. 80. .borderedtr:last-childtd:first-child81. -moz-border-radius:0006px;82. -webkit-border-radius:0006px;83. border-radius:0006px;84. 85. 86. .b
8、orderedtr:last-childtd:last-child87. -moz-border-radius:006px0;88. -webkit-border-radius:006px0;89. border-radius:006px0;90. 91. 92. /*-*/93. 94. .zebratd,.zebrath95. padding:10px;96. border-bottom:1pxsolid#f2f2f2;97. 98. 99. .zebratbodytr:nth-child(even)100. background:#f5f5f5;101. -webkit-box-shad
9、ow:01px0rgba(255,255,255,.8)inset;102. -moz-box-shadow:01px0rgba(255,255,255,.8)inset;103. box-shadow:01px0rgba(255,255,255,.8)inset;104. 105. 106. .zebrath107. text-align:left;108. text-shadow:01px0rgba(255,255,255,.5);109. border-bottom:1pxsolid#ccc;110. background-color:#eee;111. background-image
10、:-webkit-gradient(linear,lefttop,leftbottom,from(#f5f5f5),to(#eee);112. background-image:-webkit-linear-gradient(top,#f5f5f5,#eee);113. background-image:-moz-linear-gradient(top,#f5f5f5,#eee);114. background-image:-ms-linear-gradient(top,#f5f5f5,#eee);115. background-image:-o-linear-gradient(top,#f5
11、f5f5,#eee);116. background-image:linear-gradient(top,#f5f5f5,#eee);117. 118. 119. .zebrath:first-child120. -moz-border-radius:6px000;121. -webkit-border-radius:6px000;122. border-radius:6px000;123. 124. 125. .zebrath:last-child126. -moz-border-radius:06px00;127. -webkit-border-radius:06px00;128. bor
12、der-radius:06px00;129. 130. 131. .zebrath:only-child132. -moz-border-radius:6px6px00;133. -webkit-border-radius:6px6px00;134. border-radius:6px6px00;135. 136. 137. .zebratfoottd138. border-bottom:0;139. border-top:1pxsolid#fff;140. background-color:#f1f1f1;141. 142. 143. .zebratfoottd:first-child144
13、. -moz-border-radius:0006px;145. -webkit-border-radius:0006px;146. border-radius:0006px;147. 148. 149. .zebratfoottd:last-child150. -moz-border-radius:006px0;151. -webkit-border-radius:006px0;152. border-radius:006px0;153. 154. 155. .zebratfoottd:only-child156. -moz-border-radius:006px6px;157. -webkit-border-radius:006px6px158. border-radius:00
