Row highlighting applied incorrectly
Row highlighting applied incorrectly
chris_n
Posts: 53Questions: 3Answers: 0
in Bug reports
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.
This discussion has been closed.
Replies
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.
So here is the solution for my case which I came up with:
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.
i'm not sure where that
:nth-child(2n+1)is coming from.The DataTables / Bootstrap integration doesn't use
:nth-childat all.Allan