Posted By

Mithun on 01/13/08


Tagged

css table Dojo Filtering


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

Mithun
jonhenshaw
adix
ctronci
asturi
jeffery2k2610
jillella


Table Styles


 / Published in: CSS
 

This CSS style is dedicated to all those love dojo 0.4.x Filtering Table,\r\n\r\nAlthough this code is written to use with the filtering table, it woks fine with all tables.\r\n\r\nWhat to do is just include the below CSS in your page and add the class=\"xxx\" to your html table/filtering table.

  1. /** * @author mithun */
  2.  
  3. table{
  4. margin: auto;
  5. border-collapse:collapse;
  6. font-family:Lucida Grande, Verdana;
  7. font-size:16px;
  8. text-align: center;
  9. width:80%;
  10. }
  11. table td,table th{
  12. padding:2px;
  13. font-weight:normal;
  14. padding: 2px;
  15. }
  16. table th{
  17. font-weight:bold;
  18. }
  19. table.aquamarine{
  20. border: 1px solid #050;
  21. }
  22. table.aquamarine tr th,
  23. table.aquamarine tr td{
  24. border: 1px dotted #050;
  25. }
  26. table.aquamarine tr th{
  27. background-color: #48a474;
  28. color: #ccffcc;
  29. }
  30. table.aquamarine tr td{
  31. background-color: #ded;
  32. }
  33. table.aquamarine tr.alt td{
  34. background-color: #b8dcc1;
  35. }
  36. table.aquamarine tr:hover td{
  37. background-color: #7fc08f;
  38. color: #ccffcc;
  39. }
  40. table.blue{
  41. border: 1px solid #94beff;
  42. }
  43. table.blue tr th,
  44. table.blue tr td{
  45. border: 1px dotted #94beff;
  46. }
  47. table.blue td, table th {
  48. background-color: #94beff;
  49. background-image:url(../images/bg-head.gif);
  50. background-repeat:no-repeat;
  51. background-position:top right;
  52. }
  53. table.blue td.selectedUp,
  54. table th.selectedUp {
  55. background-image:url(../images/bg-headup.gif);
  56. }
  57. table.blue td.selectedDown,
  58. table th.selectedDown {
  59. background-image:url(../images/bg-headdown.gif);
  60. }
  61. table.blue tr td{
  62. background: #fff;
  63. }
  64. table.blue tr.alt td{
  65. background: #e3edfa;
  66. }
  67. table.blue tr.selected td{
  68. background: yellow;
  69. }
  70. table.blue tr:hover td{
  71. background: #a6c2e7;
  72. }
  73. table.blue tr.selected:hover td{
  74. background:#ff9;}table.cool{
  75. border: 1px solid #6BB12B;
  76. }
  77. table.cool tr th,
  78. table.cool tr td{
  79. border: 1px dotted #91d552;
  80. }
  81. table.cool tr th{
  82. background-color: #91d552;
  83. color: #000;
  84. }
  85. table.cool tr td{
  86. background-color: #d5f7b5;
  87. }
  88. table.cool tr.alt td{
  89. background-color: #e7fad5;
  90. }
  91. table.cool tr:hover td{
  92. background-color: #b1f075;
  93. color: #333;
  94. }
  95. table.cyan{
  96. border: 1px solid #2b8383;
  97. }
  98. table.cyan tr th,
  99. table.cyan tr td{
  100. border: 1px dotted #2b8383;
  101. }
  102. table.cyan tr th{
  103. background-color: #099;
  104. color: #cfc;
  105. }
  106. table.cyan tr td{
  107. background-color: #e5f5f5;
  108. }
  109. table.cyan tr.alt td{
  110. background-color: #d1f0f0;
  111. }
  112. table.cyan tr:hover td{
  113. background-color: #a5e1e0;
  114. color: #366;
  115. }table.green{
  116. border: 1px solid #00B366;
  117. }
  118. table.green tr th,
  119. table.green tr td{
  120. border: 1px dotted #00B366;
  121. }
  122. table.green tr th{
  123. background-color: #167a61;
  124. color: #cfc;
  125. }
  126. table.green tr td{
  127. background-color: #569591;
  128. }
  129. table.green tr.alt td{
  130. background-color: #63a8a8;
  131. }
  132. table.green tr:hover td{
  133. background-color: #167a61;
  134. color: #cfc;
  135. }
  136. table.nature{
  137. border: 1px solid #4b6c15;
  138. color: #040;
  139. }
  140. table.nature tr th,
  141. table.nature tr td{
  142. border: 1px dotted #4b6c15;
  143. }
  144. table.nature tr th{
  145. background-color: #4b6c15;
  146. color: #fff;
  147. }
  148. table.nature tr td{
  149. background-color: #d9e8af;
  150. }
  151. table.nature tr.alt td{
  152. background-color: #bcd671;
  153. }
  154. table.nature tr:hover td{
  155. background: #73a800;
  156. }
  157. table.orange{
  158. color: #400;
  159. border: 1px solid #f93;
  160. }
  161. table.orange tr th,
  162. table.orange tr td{
  163. border: 1px dotted #f93;
  164. }
  165. table.orange tr th{
  166. background-color: #fc0;
  167. }
  168. table.orange tr td{
  169. background-color: #feb;
  170. }
  171. table.orange tr.alt td{
  172. background-color: #fe9;
  173. }
  174. table.orange tr.selected td{
  175. background-color: #fc9;
  176. }
  177. table.orange tr:hover td{
  178. background: #fd8;
  179. }
  180. table.orange tr.selected:hover td{
  181. background:#fcb;
  182. }
  183. table.olive{
  184. border: 1px solid #090;
  185. color: #040;
  186. }
  187. table.olive tr th,
  188. table.olive tr td{
  189. border: 1px dotted #090;
  190. }
  191. table.olive tr th{
  192. background-color: #4B6C15;
  193. color: #fff;
  194. }
  195. table.olive tr td{
  196. background-color: #dfd;
  197. }
  198. table.olive tr.alt td{
  199. background-color: #dfe;
  200. }
  201. table.olive tr.selected td{
  202. background-color: #9dc;
  203. }
  204. table.olive tr:hover td{
  205. background: #bfb;
  206. }
  207. table.olive tr.selected:hover td{
  208. background:#9ca;
  209. }
  210. table.pink{
  211. border: 1px solid #faa;
  212. color: #400;
  213. }
  214. table.pink tr th,
  215. table.pink tr td{
  216. border: 1px dotted #faa;
  217. }
  218. table.pink tr th{
  219. background-color: #f99;
  220. }
  221. table.pink tr td{
  222. background-color: #fee;
  223. }
  224. table.pink tr.alt td{
  225. background-color: #fdd;
  226. }
  227. table.pink tr.selected td{
  228. background-color: #fcd;
  229. }
  230. table.pink tr:hover td{
  231. background: #fbb;
  232. }
  233. table.pink tr.selected:hover td{
  234. background:#ebc;
  235. }
  236. table.pink tr th.selectedUp{
  237. background-color: #f99;
  238. }
  239. table.pink tr th.selectedDown{
  240. background-color: #f99;
  241. }
  242. table.violet{
  243. border: 1px solid #81218a;
  244. }
  245. table.violet tr th,
  246. table.violet tr td{
  247. border: 1px dotted #81218a;
  248. }
  249. table.violet tr th{
  250. background-color: #81218a;
  251. color: #fff;
  252. }
  253. table.violet tr td{
  254. background-color: #f7f8f9;
  255. }
  256. table.violet tr.alt td{
  257. background-color: #e8f1f7;
  258. }
  259. table.violet tr:hover td{
  260. background-color: #c4cae2;
  261. color: #333;
  262. }

Report this snippet  

You need to login to post a comment.