CODEWITHSUNDEEP
htmlcss
user990767
user990767

Reputation: 1019

Coloring table rows - 3 rows, 3 different colors?

I want to set the background color of my table rows to 3 different colors, basically like this:

Row 1 - Red
Row 2 - Blue
Row 3 - White

Initally I've had only two different colors where I used this tr:nth-child(2n+3) {background: #6bb8ff}

But I guess this can't work for 3 different colors as for example the 6th row would match every 3rd and every 2nd row ?

Is there any other way to do this, or am I thinking too complicated ? :-)

Upvotes: 1

Views: 4781

Answers (4)

Kaptan
Kaptan

Reputation: 336

<table>
<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>
<tr><td>Row3</td></tr>
<tr><td>Row4</td></tr>
<tr><td>Row5</td></tr>
<tr><td>Row6</td></tr>
<tr><td>Row7</td></tr>
</table>

table tr:nth-child(3n+1)
{
 color:red;
}
table tr:nth-child(3n+2)
{
 color:blue; 
}
table tr:nth-child(3n+3)
{
 color:white; 
}

Working Example

Upvotes: 0

user990767
user990767

Reputation: 1019

:nth-of-type(3n), :nth-of-type(3n+1),:nth-of-type(3n+2)

did the trick.

Upvotes: 2

slash197
slash197

Reputation: 9034

You can use :nth-child(3n+3) for every third element.

Upvotes: 3

nickw444
nickw444

Reputation: 966

Why not, use classes to show the rows. If you're using a scripting language to output code, this shouldn't be too hard to implement

CSS:

<style>
.row1 {
background-color: #FF0000
}
.row2 {
background-color: #0000FF
}
.row3 {
background-color: #FFFFFF
}
</style>

HTML

<table>
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row1"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row2"><td>Roeeels</td><td>Rofles</td></tr>
<tr class="row3"><td>Roeeels</td><td>Rofles</td></tr>
</table>

Upvotes: 2

Related Questions