I'm using Bootstrap and have a striped table. To show more detailed information on demand I have collapsed every second row.
Folding(but not striped) table,
Twitter Bootstrap Use collapse.js on table cells [Almost Done]
The thing is that with the default behaviour all 'main' table rows are colored in the same color and table does not look striped when all expandable rows(with detailed information) are collapsed. This is because expandable rows 'break' the coloring order.
I want to have main row and expandable row to be considered as single block and to be colored using one color.
My idea was to change step of the striping from every second to every second pair of rows. But I do not know how to do this.
in bootstrap.css there are the following string responsible for the striping:
...
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
...
I guess I need to change 'odd' parameter to something like (4n-3 and 4n-2) but I am not sure how to do it correctly.
Is it possible to change striping step and if so how can I do this?
Best Answer
Quote:
In short, yes you can change
odd
to4n-3
, (the index of the first child is 1).Keys:
Note: An example for keys 1/2 would be
p:nth-child(odd)
and an example for keys 3/4/5 (in terms of an+b) would bep:nth-child(4n-3)