Two tables that I want to act the same

JonF

See http://fleming-group.com/Hidden/New/Test.htm, and debug code opavaf. I want both tables to look the same, with no search box and no "Showing X of Y" after the table, and the first column wide enough to prevent wrap, and bold column headers. Obviously that isn't happening, and the tables act quite different in IE9 and Opera 12 (in Opera 12 the second table almost works, which shows that DataTables is trying) And it appears my CSS is not being applied to the second table in Opera. My custom CSS is:

[code]/* DataTables hide some elements */
#WS_Data_filter, #WS_Data_info, #D_Data_filter, #D_Data_info {
display: none;
}
/* DataTables border on the bottom of the scrolling region */
.dataTables_scrollBody {
border-bottom: 1px solid;
}
/* DataTables highlighting */
#WS_Data tbody tr.even:hover, #D_Data tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #b3d5ff;
}

#WS_Data tbody tr.odd:hover, #D_Data tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #b3d5ff;
}

#WS_Data tr.even:hover, #D_Data tr.even:hover{
background-color: #ECFFB3;
}

#WS_Data tr.even:hover td.sorting_1, #D_Data tr.even:hover td.sorting_1 {
background-color: #6bacfd;
}

#WS_Data tr.even:hover td.sorting_2, #D_Data tr.even:hover td.sorting_2 {
background-color: #6bacfd;
}

#WS_Data tr.even:hover td.sorting_3, #D_Data tr.even:hover td.sorting_3 {
background-color: #6bacfd;
}

#WS_Data tr.odd:hover, #D_Data tr.odd:hover {
background-color: #6bacfd;
}

#WS_Data tr.odd:hover td.sorting_1, #D_Data tr.odd:hover td.sorting_1 {
background-color: #6bacfd;
}

#WS_Data tr.odd:hover td.sorting_2, #D_Data tr.odd:hover td.sorting_2 {
background-color: #6bacfd;
}

#WS_Data tr.odd:hover td.sorting_3, #D_Data tr.odd:hover td.sorting_3 {
background-color: #6bacfd;
}][/code]

allan

Your second table uses TD cells in the header rather than TH cells as in the first table. That I think accounts for the styling difference I can see between the two.

Allan

JonF

Ah, good catch. I know how that happened. Thanks That fixes almost all of the issues.

I found in the Developer Tools console in IE that there was a warning for each table: "DataTables warning (table id = 'WS_Data'): The table cannot fit into the current element which will cause column misalignment. The table has been drawn at its minimum possible width. " So I wrapped each table in a nice wide div.

I also found that DataTables won't work using an id selector on id D_Table (i.e. "$("#D_Data").dataTable ( {,\...". Id Diff_Table works.

The only minor issue, and I can live with it; in the first table the column headers for the first few columns aren't aligned exactly.