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 */ 109table.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 128table.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 136table.display tfoot th { 137 padding: 3px 18px 3px 10px; 138 border-top: 1px solid black; 139 font-weight: bold; 140} 141 142table.display tr.heading2 td { 143 border-bottom: 1px solid #aaa; 144} 145 146table.display td { 147 padding: 3px 10px; 148} 149 150table.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 */ 187table.display tr.odd.gradeA { 188 background-color: #ddffdd; 189} 190 191table.display tr.even.gradeA { 192 background-color: #eeffee; 193} 194 195table.display tr.odd.gradeC { 196 background-color: #ddddff; 197} 198 199table.display tr.even.gradeC { 200 background-color: #eeeeff; 201} 202 203table.display tr.odd.gradeX { 204 background-color: #ffdddd; 205} 206 207table.display tr.even.gradeX { 208 background-color: #ffeeee; 209} 210 211table.display tr.odd.gradeU { 212 background-color: #ddd; 213} 214 215table.display tr.even.gradeU { 216 background-color: #eee; 217} 218 219 220tr.odd { 221 background-color: #E2E4FF; 222} 223 224tr.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 261tfoot input { 262 margin: 0.5em 0; 263 width: 100%; 264 color: #444; 265} 266 267tfoot input.search_init { 268 color: #999; 269} 270 271td.group { 272 background-color: #d1cfd0; 273 border-bottom: 2px solid #A19B9E; 274 border-top: 2px solid #A19B9E; 275} 276 277td.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 316table.display tr.even.row_selected td { 317 background-color: #B0BED9; 318} 319 320table.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 */ 329tr.odd td.sorting_1 { 330 background-color: #D3D6FF; 331} 332 333tr.odd td.sorting_2 { 334 background-color: #DADCFF; 335} 336 337tr.odd td.sorting_3 { 338 background-color: #E0E2FF; 339} 340 341tr.even td.sorting_1 { 342 background-color: #EAEBFF; 343} 344 345tr.even td.sorting_2 { 346 background-color: #F2F3FF; 347} 348 349tr.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 */ 364tr.odd.gradeA td.sorting_1 { 365 background-color: #c4ffc4; 366} 367 368tr.odd.gradeA td.sorting_2 { 369 background-color: #d1ffd1; 370} 371 372tr.odd.gradeA td.sorting_3 { 373 background-color: #d1ffd1; 374} 375 376tr.even.gradeA td.sorting_1 { 377 background-color: #d5ffd5; 378} 379 380tr.even.gradeA td.sorting_2 { 381 background-color: #e2ffe2; 382} 383 384tr.even.gradeA td.sorting_3 { 385 background-color: #e2ffe2; 386} 387 388tr.odd.gradeC td.sorting_1 { 389 background-color: #c4c4ff; 390} 391 392tr.odd.gradeC td.sorting_2 { 393 background-color: #d1d1ff; 394} 395 396tr.odd.gradeC td.sorting_3 { 397 background-color: #d1d1ff; 398} 399 400tr.even.gradeC td.sorting_1 { 401 background-color: #d5d5ff; 402} 403 404tr.even.gradeC td.sorting_2 { 405 background-color: #e2e2ff; 406} 407 408tr.even.gradeC td.sorting_3 { 409 background-color: #e2e2ff; 410} 411 412tr.odd.gradeX td.sorting_1 { 413 background-color: #ffc4c4; 414} 415 416tr.odd.gradeX td.sorting_2 { 417 background-color: #ffd1d1; 418} 419 420tr.odd.gradeX td.sorting_3 { 421 background-color: #ffd1d1; 422} 423 424tr.even.gradeX td.sorting_1 { 425 background-color: #ffd5d5; 426} 427 428tr.even.gradeX td.sorting_2 { 429 background-color: #ffe2e2; 430} 431 432tr.even.gradeX td.sorting_3 { 433 background-color: #ffe2e2; 434} 435 436tr.odd.gradeU td.sorting_1 { 437 background-color: #c4c4c4; 438} 439 440tr.odd.gradeU td.sorting_2 { 441 background-color: #d1d1d1; 442} 443 444tr.odd.gradeU td.sorting_3 { 445 background-color: #d1d1d1; 446} 447 448tr.even.gradeU td.sorting_1 { 449 background-color: #d5d5d5; 450} 451 452tr.even.gradeU td.sorting_2 { 453 background-color: #e2e2e2; 454} 455 456tr.even.gradeU td.sorting_3 { 457 background-color: #e2e2e2; 458} 459 460 461/* 462 * Row highlighting example 463 */ 464.ex_highlight tbody tr.even:hover, tbody tr.even td.highlighted { 465 background-color: #ECFFB3; 466} 467 468.ex_highlight tbody tr.odd:hover, tbody tr.odd td.highlighted { 469 background-color: #E6FF99; 470} 471 472.ex_highlight_row tr.even:hover { 473 background-color: #ECFFB3; 474} 475 476.ex_highlight_row tr.even:hover td.sorting_1 { 477 background-color: #DDFF75; 478} 479 480.ex_highlight_row tr.even:hover td.sorting_2 { 481 background-color: #E7FF9E; 482} 483 484.ex_highlight_row tr.even:hover td.sorting_3 { 485 background-color: #E2FF89; 486} 487 488.ex_highlight_row tr.odd:hover { 489 background-color: #E6FF99; 490} 491 492.ex_highlight_row tr.odd:hover td.sorting_1 { 493 background-color: #D6FF5C; 494} 495 496.ex_highlight_row tr.odd:hover td.sorting_2 { 497 background-color: #E0FF84; 498} 499 500.ex_highlight_row tr.odd:hover td.sorting_3 { 501 background-color: #DBFF70; 502} 503 504 505/* 506 * KeyTable 507 */ 508table.KeyTable td { 509 border: 3px solid transparent; 510} 511 512table.KeyTable td.focus { 513 border: 3px solid #3366FF; 514} 515 516table.display tr.gradeA { 517 background-color: #eeffee; 518} 519 520table.display tr.gradeC { 521 background-color: #ddddff; 522} 523 524table.display tr.gradeX { 525 background-color: #ffdddd; 526} 527 528table.display tr.gradeU { 529 background-color: #ddd; 530} 531 532div.box { 533 height: 100px; 534 padding: 10px; 535 overflow: auto; 536 border: 1px solid #8080FF; 537 background-color: #E5E5FF; 538} 539