Row highlighting applied incorrectly

chris_n

It appears that row highlighting is being applied at the incorrect level (at least from a logical standpoint). At present the default css applies the background color at the table division level:

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #f9f9f9;
}

This leads to some confusion when working with alternate striping schemes due to what appears to be the general (and logical) assumption that we are applying the background color to the entire row.[1] For example, if we attempt to do something like this:

table.dataTable tbody tr.some-class {
    background: #ccffcc;
}

The new background is not applied to odd rows due to being overridden by the default background color which is applied at the td level.

I may have missed something, but I cannot find where this is documented.

[1] http://stackoverflow.com/questions/25993025/row-highlight-based-on-a-cell-value-not-hapenning-in-jquery-datatable

chris_n

Actually, looking again at the styling examples, the default behaviour evidently allows for vertical striping/highlighting which is desirable. Maybe some improved documentation and/or examples would help clarify.

chris_n

So here is the solution for my case which I came up with:

.table-striped > tbody > tr:nth-child(2n+1).some-class > td, .table-striped > tbody > tr:nth-child(2n+1).some-class > th {
    background  :#fafd96 !important;
}

This appears to override the default td background based on the given class of the tr element.

Note: This will probably break columnar highlighting of any sort, so you'll need to go another route if that is the case.

allan

i'm not sure where that :nth-child(2n+1) is coming from.

The DataTables / Bootstrap integration doesn't use :nth-child at all.

Allan