Styling multiple alternate table rows

Question

I currently have a "vertical table" (i.e. the headings are on the right). The html looks like this:

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

I am trying to style each "data chunk" - the three rows with 1, three rows with 2, etc. in an even or odd basis - within each tbody.

My first idea was to use `tr:nth-child(odd)`; however, that does this:

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tr:nth-child(odd) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

Which does not work.

I then tried styling it by tbody (tbody:nth-child(odd)) but that obviously did not work.

Another one I tried was `:nth-child(-n+3)` which created this result:

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tr:nth-child(-n+3) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

It's close, but only gets the first "data-chunk" (as I am calling it).

I am looking for a pure-css way to style multiple alternate table rows, something which would look like this:

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
.style-me {
  background-color: steelblue;
}
tbody:before{
  content: 'new tbody';
}

<table>
  <tbody>
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr class="style-me"><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
    <tr class="style-me"><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr class="style-me"><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

However, instead of using classes it uses a css selector/pseudo class/element (maybe :nth-of-type?) to style the odd groupings of rows as the amount of grouping of rows is unknown (it's a dynamic table)

This comment in the answers which best describes what I am looking for.

one question: why are you using *``* and *``* in the same row and also within *``* ? — vivekkupadhyay, Sep 23 '16 at 03:58
@vivekkupadhyay a) I am trying to make a [vertical table](http://stackoverflow.com/questions/6368061/most-common-way-of-writing-a-html-table-with-vertical-headers) and b) on the two `tbody`s it is how the data is separated. — 4lackof, Sep 23 '16 at 04:07

hdotluna · Accepted Answer · 2016-09-23T04:47:55.850

https://jsfiddle.net/Lg9cwwxn/2/

HTML

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
tbody:before {
  content: 'new tbody';
}

tr:nth-child(even):nth-child(3n-1) {
  background-color: steelblue;
}

tr:nth-child(odd) {
  background: steelblue;
}

tr:nth-child(odd):nth-child(6n-1) {
  background: white;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>1</th><td>1</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>3</th><td>3</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>4</th><td>4</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>6</th><td>6</td></tr>
    <tr><th>6</th><td>6</td></tr>
    <tr><th>6</th><td>6</td></tr>
  </tbody>
  <tbody>
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>7</th><td>7</td></tr> 
    <tr><th>8</th><td>8</td></tr>
    <tr><th>8</th><td>8</td></tr>
    <tr><th>8</th><td>8</td></tr>
  </tbody>
</table>

Logic behind codes:

Get the Odd and change the background. :nth-child(odd)
Get the even child which also a 3n-1. The expression is 3(n) - 1 So, 3(1)-1 = 2, 3(2)-1 = 5, and so on.
Also same in odd. 6n-1 is also 6(n) - 1.

Number 2 : will be tr:nth-child(even):nth-child(2) and so on.

Number 3 : will be tr:nth-child(even):nth-child(5) and so on.

Sorry I am not good at explaining. But I hope you get the logic behind my code.

Updated. Sorry it took so long. But here's what you want. Hope it helps. Cheers!

Thank you; however, this does not work if more rows are added to a `tbody`. I updated your [jsfiddle](https://jsfiddle.net/Lg9cwwxn/1/) with more rows so you can see — 4lackof, Sep 23 '16 at 04:11
Ahh. I get what you want. It's like odd even but grouped into three. Wait. I'll try it. — hdotluna, Sep 23 '16 at 04:13
well that definitely works! Thanks a ton! Would you mind explaining how it works, just so that I can use it or modify it if my table needs to change? — 4lackof, Sep 23 '16 at 04:41
of course! I just am testing it out, making it work if I had 4 rows instead of three, etc. — 4lackof, Sep 23 '16 at 05:20
@4lackof 4 rows would be different logic. Just a mathematical calculations. Hope you get it. — hdotluna, Sep 23 '16 at 05:54

score 0 · Answer 2 · answered Sep 23 '16 at 05:04

Check the snippet below:

Code Snippet:

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 4px;
}
table > tbody:first-child > tr:first-child, 
table > tbody:first-child > tr:nth-of-type(2), 
table > tbody:first-child > tr:nth-of-type(3) {
  background-color: steelblue;
}

table > tbody:first-child > tr:last-child, 
table > tbody:first-child > tr:nth-last-of-type(2), 
table > tbody:first-child > tr:nth-last-of-type(3) {
  background-color: steelblue;
}

table > tbody:nth-of-type(2) > tr:first-child, 
table > tbody:nth-of-type(2) > tr:nth-of-type(2), 
table > tbody:nth-of-type(2) > tr:nth-of-type(3) {
  background-color: steelblue;
}

<table>
  <tbody>
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>1</th><td>1</td></tr> <!-- style this -->
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>2</th><td>2</td></tr>
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
    <tr><th>3</th><td>3</td></tr> <!-- style this -->
  </tbody>
  <tbody>
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>4</th><td>4</td></tr> <!-- style this -->
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
    <tr><th>5</th><td>5</td></tr>
  </tbody>
</table>

Styling multiple alternate table rows

My first idea was to use tr:nth-child(odd); however, that does this:

Another one I tried was :nth-child(-n+3) which created this result:

I am looking for a pure-css way to style multiple alternate table rows, something which would look like this:

2 Answers2

Code Snippet:

My first idea was to use `tr:nth-child(odd)`; however, that does this:

Another one I tried was `:nth-child(-n+3)` which created this result: