Bootstrap table striped on new rows

Question

I'm using the DataTables library to build tables. I use Bootstrap to style those tables. One of the features of DataTables is an API to expand details / add a child row. (See https://datatables.net/examples/api/row_details.html) It does this by inserting a new tr under the current row. The problem is this interferes with the Bootstrap selector to apply row shading:

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

The selector now selects the new "details" row in it's odd/even selector. I don't want this.

Any thoughts on how to how to write a selector to skip these details rows?

e.g.unexpanded

<tr role="row" class="odd">...</tr>

And then when I expand / show details:

<tr role="row" class="odd shown">...</tr>
<tr>...</tr>

score 1 · Accepted Answer · edited May 23 '17 at 11:59

I think you have the same situation as this guy here Select odd even child excluding the hidden child

Essentially, you want to exclude an element from the even/odd counting, but it's currently not possible because even/odd only searches the dom tree and counts children, is "doesn't stack" as mentioned in one of the answers

I believe this is the exact kind of case that will be solved by CSS4's nth-match selector, then you would be able to overwrite those rules with something like this:

.table-striped.has-plugin > tbody > tr:not[row]:nth-match(odd) > td,
.table-striped.has-plugin > tbody > tr:not[row]:nth-match(odd) > th {
    background-color: #f9f9f9;
}

but until we get CSS4 working, I think we are stuck with having to write javascript to get those matches, iterate over them, and then paint or add classes to them, or adding those classes to the rows in the server (but that's only if your HTML is generated by the server)

Bootstrap table striped on new rows

1 Answers1