Breakdown of differences between CSS files that ship with datatables

LukeS

I spent awhile digging into the the CSS files that ship with data tables to see what the differences between them where. This is what I have been able to gather by looking through them. Hopefully this will save someone else some time later.
demo_page.css - Demo page content CSS, does not affect datatables
demo_table.css - Demo datatables CSS, datatable must have a class of "display". Contains extra CSS for all the example pages
Code that is in this file that is NOT in the jquery.dataTables.css
[code]
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables display
*/
}

table.display tr.heading2 td {
border-bottom: 1px solid #aaa;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables row classes
*/
table.display tr.odd.gradeA {
background-color: #ddffdd;
}

table.display tr.even.gradeA {
background-color: #eeffee;
}

table.display tr.odd.gradeC {
background-color: #ddddff;
}

table.display tr.even.gradeC {
background-color: #eeeeff;
}

table.display tr.odd.gradeX {
background-color: #ffdddd;
}

table.display tr.even.gradeX {
background-color: #ffeeee;
}

table.display tr.odd.gradeU {
background-color: #ddd;
}

table.display tr.even.gradeU {
background-color: #eee;
}

.top, .bottom {
padding: 15px;
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
}

.top .dataTables_info {
float: none;
}

.clear {
clear: both;
}

.dataTables_empty {
text-align: center;
}

tfoot input {
margin: 0.5em 0;
width: 100%;
color: #444;
}

tfoot input.search_init {
color: #999;
}

td.group {
background-color: #d1cfd0;
border-bottom: 2px solid #A19B9E;
border-top: 2px solid #A19B9E;
}

td.details {
background-color: #d1cfd0;
border: 2px solid #A19B9E;
}


.example_alt_pagination div.dataTables_info {
width: 40%;
}





table.display tr.even.row_selected td {
background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
background-color: #9FAFD1;
}


/* For the Conditional-CSS grading rows */
/*
Colour calculations (based off the main row colours)
Level 1:
dd > c4
ee > d5
Level 2:
dd > d1
ee > e2
*/
tr.odd.gradeA td.sorting_1 {
background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
background-color: #d1ffd1;
}

tr.odd.gradeA td.sorting_3 {
background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
background-color: #e2ffe2;
}

tr.even.gradeA td.sorting_3 {
background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
background-color: #d1d1ff;
}

tr.odd.gradeC td.sorting_3 {
background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
background-color: #e2e2ff;
}

tr.even.gradeC td.sorting_3 {
background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
background-color: #ffd1d1;
}

tr.odd.gradeX td.sorting_3 {
background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {
background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
background-color: #ffe2e2;
}

tr.even.gradeX td.sorting_3 {
background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
background-color: #d1d1d1;
}

tr.odd.gradeU td.sorting_3 {
background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
background-color: #e2e2e2;
}

tr.even.gradeU td.sorting_3 {
background-color: #e2e2e2;
}


/*
* Row highlighting example
*/
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}

.ex_highlight_row #example tr.even:hover {
background-color: #ECFFB3;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
background-color: #DDFF75;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
background-color: #E7FF9E;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
background-color: #E2FF89;
}

.ex_highlight_row #example tr.odd:hover {
background-color: #E6FF99;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
background-color: #D6FF5C;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
background-color: #E0FF84;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
background-color: #DBFF70;
}


/*
* KeyTable
*/
table.KeyTable td {
border: 3px solid transparent;
}

table.KeyTable td.focus {
border: 3px solid #3366FF;
}

table.display tr.gradeA {
background-color: #eeffee;
}

table.display tr.gradeC {
background-color: #ddddff;
}

table.display tr.gradeX {
background-color: #ffdddd;
}

table.display tr.gradeU {
background-color: #ddd;
}

div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
[/code]
demo_table_jui.css - Same as demo_table.css but for jQuery UI theme

jquery.dataTables.css - Datatables CSS, datatable must have a class of "dataTable"
jquery.dataTables_themeroller.css - Same as above but slight changes for jQuery UI

allan

Thanks for posting your findings - I'm sure plenty of others will find it useful!

The jquery.dataTables.css file (its ThemeRoller counterpart) are the preferred method for working with DataTables CSS I would suggest, and the demo_table.css file will eventually "go away". The jquery.dataTables.css file is much simpler, compact, and easier to understand (at least, I hope so!), while demo_table.css covers everything. The jquery.dataTables.css file is what is included on the CDN, demo_table.css is not.

One other point, DataTables 1.9 will automatically add the 'dataTable' class, but no version of DataTables has ever added the 'display' class.

Allan