Posted By

luxorweb on 11/23/10


Tagged

css jquery dataTables


Versions (?)

dataTalbes CSS


 / Published in: CSS
 

  1. /*
  2.  * File: demo_table.css
  3.  * CVS: $Id$
  4.  * Description: CSS descriptions for DataTables demo pages
  5.  * Author: Allan Jardine
  6.  * Created: Tue May 12 06:47:22 BST 2009
  7.  * Modified: $Date$ by $Author$
  8.  * Language: CSS
  9.  * Project: DataTables
  10.  *
  11.  * Copyright 2009 Allan Jardine. All Rights Reserved.
  12.  *
  13.  * ***************************************************************************
  14.  * DESCRIPTION
  15.  *
  16.  * The styles given here are suitable for the demos that are used with the standard DataTables
  17.  * distribution (see www.datatables.net). You will most likely wish to modify these styles to
  18.  * meet the layout requirements of your site.
  19.  *
  20.  * Common issues:
  21.  * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
  22.  * no conflict between the two pagination types. If you want to use full_numbers pagination
  23.  * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
  24.  * modify that selector.
  25.  * Note that the path used for Images is relative. All images are by default located in
  26.  * ../images/ - relative to this CSS file.
  27.  */
  28.  
  29. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  30.  * DataTables features
  31.  */
  32.  
  33. .dataTables_wrapper {
  34. position: relative;
  35. min-height: 302px;
  36. clear: both;
  37. _height: 302px;
  38. zoom: 1; /* Feeling sorry for IE */
  39. }
  40.  
  41. .dataTables_processing {
  42. position: absolute;
  43. top: 50%;
  44. left: 50%;
  45. width: 250px;
  46. height: 30px;
  47. margin-left: -125px;
  48. margin-top: -15px;
  49. padding: 14px 0 2px 0;
  50. border: 1px solid #ddd;
  51. text-align: center;
  52. color: #999;
  53. font-size: 14px;
  54. background-color: white;
  55. }
  56.  
  57. .dataTables_length {
  58. width: 40%;
  59. float: left;
  60. }
  61.  
  62. .dataTables_filter {
  63. width: 50%;
  64. float: right;
  65. text-align: right;
  66. }
  67.  
  68. .dataTables_info {
  69. width: 60%;
  70. float: left;
  71. }
  72.  
  73. .dataTables_paginate {
  74. width: 44px;
  75. * width: 50px;
  76. float: right;
  77. text-align: right;
  78. }
  79.  
  80. /* Pagination nested */
  81. .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
  82. height: 19px;
  83. width: 19px;
  84. margin-left: 3px;
  85. float: left;
  86. }
  87.  
  88. .paginate_disabled_previous {
  89. background-image: url('../images/back_disabled.jpg');
  90. }
  91.  
  92. .paginate_enabled_previous {
  93. background-image: url('../images/back_enabled.jpg');
  94. }
  95.  
  96. .paginate_disabled_next {
  97. background-image: url('../images/forward_disabled.jpg');
  98. }
  99.  
  100. .paginate_enabled_next {
  101. background-image: url('../images/forward_enabled.jpg');
  102. }
  103.  
  104.  
  105.  
  106. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  107.  * DataTables display
  108.  */
  109. table.display {
  110. margin: 0 auto;
  111. clear: both;
  112. width: 100%;
  113.  
  114. /* Note Firefox 3.5 and before have a bug with border-collapse
  115. * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
  116. * border-spacing: 0; is one possible option. Conditional-css.com is
  117. * useful for this kind of thing
  118. *
  119. * Further note IE 6/7 has problems when calculating widths with border width.
  120. * It subtracts one px relative to the other browsers from the first column, and
  121. * adds one to the end...
  122. *
  123. * If you want that effect I'd suggest setting a border-top/left on th/td's and
  124. * then filling in the gaps with other borders.
  125. */
  126. }
  127.  
  128. table.display thead th {
  129. padding: 3px 18px 3px 10px;
  130. border-bottom: 1px solid black;
  131. font-weight: bold;
  132. cursor: pointer;
  133. * cursor: hand;
  134. }
  135.  
  136. table.display tfoot th {
  137. padding: 3px 18px 3px 10px;
  138. border-top: 1px solid black;
  139. font-weight: bold;
  140. }
  141.  
  142. table.display tr.heading2 td {
  143. border-bottom: 1px solid #aaa;
  144. }
  145.  
  146. table.display td {
  147. padding: 3px 10px;
  148. }
  149.  
  150. table.display td.center {
  151. text-align: center;
  152. }
  153.  
  154.  
  155.  
  156. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  157.  * DataTables sorting
  158.  */
  159.  
  160. .sorting_asc {
  161. background: url('../images/sort_asc.png') no-repeat center right;
  162. }
  163.  
  164. .sorting_desc {
  165. background: url('../images/sort_desc.png') no-repeat center right;
  166. }
  167.  
  168. .sorting {
  169. background: url('../images/sort_both.png') no-repeat center right;
  170. }
  171.  
  172. .sorting_asc_disabled {
  173. background: url('../images/sort_asc_disabled.png') no-repeat center right;
  174. }
  175.  
  176. .sorting_desc_disabled {
  177. background: url('../images/sort_desc_disabled.png') no-repeat center right;
  178. }
  179.  
  180.  
  181.  
  182.  
  183.  
  184. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  185.  * DataTables row classes
  186.  */
  187. table.display tr.odd.gradeA {
  188. background-color: #ddffdd;
  189. }
  190.  
  191. table.display tr.even.gradeA {
  192. background-color: #eeffee;
  193. }
  194.  
  195. table.display tr.odd.gradeC {
  196. background-color: #ddddff;
  197. }
  198.  
  199. table.display tr.even.gradeC {
  200. background-color: #eeeeff;
  201. }
  202.  
  203. table.display tr.odd.gradeX {
  204. background-color: #ffdddd;
  205. }
  206.  
  207. table.display tr.even.gradeX {
  208. background-color: #ffeeee;
  209. }
  210.  
  211. table.display tr.odd.gradeU {
  212. background-color: #ddd;
  213. }
  214.  
  215. table.display tr.even.gradeU {
  216. background-color: #eee;
  217. }
  218.  
  219.  
  220. tr.odd {
  221. background-color: #E2E4FF;
  222. }
  223.  
  224. tr.even {
  225. background-color: white;
  226. }
  227.  
  228.  
  229.  
  230.  
  231.  
  232. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  233.  * Misc
  234.  */
  235. .dataTables_scroll {
  236. clear: both;
  237. }
  238.  
  239. .dataTables_scrollBody {
  240. *margin-top: -1px;
  241. }
  242.  
  243. .top, .bottom {
  244. padding: 15px;
  245. background-color: #F5F5F5;
  246. border: 1px solid #CCCCCC;
  247. }
  248.  
  249. .top .dataTables_info {
  250. float: none;
  251. }
  252.  
  253. .clear {
  254. clear: both;
  255. }
  256.  
  257. .dataTables_empty {
  258. text-align: center;
  259. }
  260.  
  261. tfoot input {
  262. margin: 0.5em 0;
  263. width: 100%;
  264. color: #444;
  265. }
  266.  
  267. tfoot input.search_init {
  268. color: #999;
  269. }
  270.  
  271. td.group {
  272. background-color: #d1cfd0;
  273. border-bottom: 2px solid #A19B9E;
  274. border-top: 2px solid #A19B9E;
  275. }
  276.  
  277. td.details {
  278. background-color: #d1cfd0;
  279. border: 2px solid #A19B9E;
  280. }
  281.  
  282.  
  283. .example_alt_pagination div.dataTables_info {
  284. width: 40%;
  285. }
  286.  
  287. .paging_full_numbers {
  288. width: 400px;
  289. height: 22px;
  290. line-height: 22px;
  291. }
  292.  
  293. .paging_full_numbers span.paginate_button,
  294. .paging_full_numbers span.paginate_active {
  295. border: 1px solid #aaa;
  296. -webkit-border-radius: 5px;
  297. -moz-border-radius: 5px;
  298. padding: 2px 5px;
  299. margin: 0 3px;
  300. cursor: pointer;
  301. *cursor: hand;
  302. }
  303.  
  304. .paging_full_numbers span.paginate_button {
  305. background-color: #ddd;
  306. }
  307.  
  308. .paging_full_numbers span.paginate_button:hover {
  309. background-color: #ccc;
  310. }
  311.  
  312. .paging_full_numbers span.paginate_active {
  313. background-color: #99B3FF;
  314. }
  315.  
  316. table.display tr.even.row_selected td {
  317. background-color: #B0BED9;
  318. }
  319.  
  320. table.display tr.odd.row_selected td {
  321. background-color: #9FAFD1;
  322. }
  323.  
  324.  
  325. /*
  326.  * Sorting classes for columns
  327.  */
  328. /* For the standard odd/even */
  329. tr.odd td.sorting_1 {
  330. background-color: #D3D6FF;
  331. }
  332.  
  333. tr.odd td.sorting_2 {
  334. background-color: #DADCFF;
  335. }
  336.  
  337. tr.odd td.sorting_3 {
  338. background-color: #E0E2FF;
  339. }
  340.  
  341. tr.even td.sorting_1 {
  342. background-color: #EAEBFF;
  343. }
  344.  
  345. tr.even td.sorting_2 {
  346. background-color: #F2F3FF;
  347. }
  348.  
  349. tr.even td.sorting_3 {
  350. background-color: #F9F9FF;
  351. }
  352.  
  353.  
  354. /* For the Conditional-CSS grading rows */
  355. /*
  356.   Colour calculations (based off the main row colours)
  357.   Level 1:
  358. dd > c4
  359. ee > d5
  360. Level 2:
  361. dd > d1
  362. ee > e2
  363.  */
  364. tr.odd.gradeA td.sorting_1 {
  365. background-color: #c4ffc4;
  366. }
  367.  
  368. tr.odd.gradeA td.sorting_2 {
  369. background-color: #d1ffd1;
  370. }
  371.  
  372. tr.odd.gradeA td.sorting_3 {
  373. background-color: #d1ffd1;
  374. }
  375.  
  376. tr.even.gradeA td.sorting_1 {
  377. background-color: #d5ffd5;
  378. }
  379.  
  380. tr.even.gradeA td.sorting_2 {
  381. background-color: #e2ffe2;
  382. }
  383.  
  384. tr.even.gradeA td.sorting_3 {
  385. background-color: #e2ffe2;
  386. }
  387.  
  388. tr.odd.gradeC td.sorting_1 {
  389. background-color: #c4c4ff;
  390. }
  391.  
  392. tr.odd.gradeC td.sorting_2 {
  393. background-color: #d1d1ff;
  394. }
  395.  
  396. tr.odd.gradeC td.sorting_3 {
  397. background-color: #d1d1ff;
  398. }
  399.  
  400. tr.even.gradeC td.sorting_1 {
  401. background-color: #d5d5ff;
  402. }
  403.  
  404. tr.even.gradeC td.sorting_2 {
  405. background-color: #e2e2ff;
  406. }
  407.  
  408. tr.even.gradeC td.sorting_3 {
  409. background-color: #e2e2ff;
  410. }
  411.  
  412. tr.odd.gradeX td.sorting_1 {
  413. background-color: #ffc4c4;
  414. }
  415.  
  416. tr.odd.gradeX td.sorting_2 {
  417. background-color: #ffd1d1;
  418. }
  419.  
  420. tr.odd.gradeX td.sorting_3 {
  421. background-color: #ffd1d1;
  422. }
  423.  
  424. tr.even.gradeX td.sorting_1 {
  425. background-color: #ffd5d5;
  426. }
  427.  
  428. tr.even.gradeX td.sorting_2 {
  429. background-color: #ffe2e2;
  430. }
  431.  
  432. tr.even.gradeX td.sorting_3 {
  433. background-color: #ffe2e2;
  434. }
  435.  
  436. tr.odd.gradeU td.sorting_1 {
  437. background-color: #c4c4c4;
  438. }
  439.  
  440. tr.odd.gradeU td.sorting_2 {
  441. background-color: #d1d1d1;
  442. }
  443.  
  444. tr.odd.gradeU td.sorting_3 {
  445. background-color: #d1d1d1;
  446. }
  447.  
  448. tr.even.gradeU td.sorting_1 {
  449. background-color: #d5d5d5;
  450. }
  451.  
  452. tr.even.gradeU td.sorting_2 {
  453. background-color: #e2e2e2;
  454. }
  455.  
  456. tr.even.gradeU td.sorting_3 {
  457. background-color: #e2e2e2;
  458. }
  459.  
  460.  
  461. /*
  462.  * Row highlighting example
  463.  */
  464. .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
  465. background-color: #ECFFB3;
  466. }
  467.  
  468. .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
  469. background-color: #E6FF99;
  470. }
  471.  
  472. .ex_highlight_row #example tr.even:hover {
  473. background-color: #ECFFB3;
  474. }
  475.  
  476. .ex_highlight_row #example tr.even:hover td.sorting_1 {
  477. background-color: #DDFF75;
  478. }
  479.  
  480. .ex_highlight_row #example tr.even:hover td.sorting_2 {
  481. background-color: #E7FF9E;
  482. }
  483.  
  484. .ex_highlight_row #example tr.even:hover td.sorting_3 {
  485. background-color: #E2FF89;
  486. }
  487.  
  488. .ex_highlight_row #example tr.odd:hover {
  489. background-color: #E6FF99;
  490. }
  491.  
  492. .ex_highlight_row #example tr.odd:hover td.sorting_1 {
  493. background-color: #D6FF5C;
  494. }
  495.  
  496. .ex_highlight_row #example tr.odd:hover td.sorting_2 {
  497. background-color: #E0FF84;
  498. }
  499.  
  500. .ex_highlight_row #example tr.odd:hover td.sorting_3 {
  501. background-color: #DBFF70;
  502. }
  503.  
  504.  
  505. /*
  506.  * KeyTable
  507.  */
  508. table.KeyTable td {
  509. border: 3px solid transparent;
  510. }
  511.  
  512. table.KeyTable td.focus {
  513. border: 3px solid #3366FF;
  514. }
  515.  
  516. table.display tr.gradeA {
  517. background-color: #eeffee;
  518. }
  519.  
  520. table.display tr.gradeC {
  521. background-color: #ddddff;
  522. }
  523.  
  524. table.display tr.gradeX {
  525. background-color: #ffdddd;
  526. }
  527.  
  528. table.display tr.gradeU {
  529. background-color: #ddd;
  530. }
  531.  
  532. div.box {
  533. height: 100px;
  534. padding: 10px;
  535. overflow: auto;
  536. border: 1px solid #8080FF;
  537. background-color: #E5E5FF;
  538. }

Report this snippet  

You need to login to post a comment.