Bootstrap table striped: how can I change the stripe step?

Question

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?

Answer 1

Quote:

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.

In short, yes you can change odd to 4n-3, (the index of the first child is 1).

Keys:

1. odd: used to match child elements whose index is odd.
2. even: used to match child elements whose index is even.
3. a: represents a cycle size
4. n: a counter that starts at 0
5. b: an offset value

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 be p:nth-child(4n-3)