0

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.

Improve this question
2
  • one question: why are you using <th> and <td> in the same row and also within <tbody> ? Commented Sep 23, 2016 at 3:58
  • @vivekkupadhyay a) I am trying to make a vertical table and b) on the two tbodys it is how the data is separated. Commented Sep 23, 2016 at 4:07

2 Answers 2

Reset to default
2

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:

  1. Get the Odd and change the background. :nth-child(odd)
  2. 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.
  3. 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!

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thank you; however, this does not work if more rows are added to a tbody. I updated your jsfiddle with more rows so you can see
Ahh. I get what you want. It's like odd even but grouped into three. Wait. I'll try it.
Updated @4lackof. Is that what you want?
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?
of course! I just am testing it out, making it work if I had 4 rows instead of three, etc.
|
0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.