Row highlighting applied incorrectly

Row highlighting applied incorrectly

chris_nchris_n Posts: 53Questions: 3Answers: 0

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

Replies

  • chris_nchris_n Posts: 53Questions: 3Answers: 0

    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_nchris_n Posts: 53Questions: 3Answers: 0
    edited February 2016

    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.

  • allanallan Posts: 54,680Questions: 1Answers: 8,552 Site admin

    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

This discussion has been closed.