9

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?

Community
  • 1
  • 1
Triple
  • 115
  • 1
  • 9

1 Answers1

10

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)

Jordan.J.D
  • 7,382
  • 9
  • 44
  • 75
  • @Triple you're welcome! if this helps you don't forget to click the check mark under the arrows next to my answer. – Jordan.J.D Aug 26 '14 at 13:35
  • Thanks a lot for the clarification! To have what I asked I added to my custom css file '.table-striped > tbody > tr:nth-child(4n+i) > td, .table-striped > tbody > tr:nth-child(4n+i) > th { background-color: #ffffff; }' where i changed from 1 to 4. So I have 4 identical blocks which are differed by index i. Not looks nice. Is it OK? Or can this be improved? – Triple Aug 26 '14 at 13:47
  • That seems like a separate question. You should post a new question with the updated information you got from this. – Jordan.J.D Aug 26 '14 at 13:49