CSS background color of individual rows

Question

I found many articles online about coloring alternate table rows. what about if I want use different colors for individual rows, how can I do that?

<table class="table1">          
<tr>
   <th>Name</th>
   <th>Surname</th>
   <th>Email</th>
</tr>                
 @{ foreach (var p in Model.People)
     {   <tr>
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
  }
</table>

Answer 1

You can have in your css

.table1 tr:nth-child(1) {    background:blue;           }
.table1 tr:nth-child(2) {    background:red;            }
.table1 tr:nth-child(3) {    background:orange;         }
...
​

See demo http://jsfiddle.net/wnCgL/

Edit

with jQuery, using a random color function

$(function() {
     $('.table1').find('tr').each(
        function() {
          $(this).css('background', get_random_color());  
        });
});

http://jsfiddle.net/wnCgL/1/

Answer 2

For example like this. Define some enumm or you can later generate colors by random:

public enum Colors
{
    Blue = 1,
    Red = 2,
    Yellow = 3,
    Pink = 4,
    Green = 5,
}

then in markup file get random color from enum

@{ foreach (var p in Model.People)
     {   <tr style="background-color:@(Colors[new Random().Next(0,Colors.Length)])">
             <td>@p.Name</td>
             <td>@p.Surname</td>
             <td>@p.Number</d>
         </tr>
     } 
}

Update: Or if you want to make it more readable for users use odd and even css styles.

Answer 3

Check this fiddle - http://jsfiddle.net/r74j6/6/

Or this post - Apply different background color using jquery

Answer 4

Well basically you have 2 options.

1) Model Property - Put the class as a Model property for each of the people, that way you can assign different ones to different people.

2) Pure CSS - If you want the CSS route, just specify different colours for different selectors.

Personally, I'd go for number 2. Here's examples:

Different Row Colours - DEMO

For different row colours for each item, you'll have to do something like:

tr:nth-child(2)
{
    background-color: red;
}
tr:nth-child(3)
{
    background-color: blue;
}
tr:nth-child(4)
{
    background-color: green;
}
tr:nth-child(5)
{
    background-color: yellow;
}
tr:nth-child(6)
{
    background-color: orange;
}
tr:nth-child(7)
{
    background-color: purple;
}

Alternating Rows - DEMO

For alternating rows, just do:

tr:not(:nth-child(1)):nth-child(odd) /* excluding first row (header) */
{
    background-color: blue;
}
tr:nth-child(even)
{
    background-color: red;
}

Answer 5

I'd rather fill td's background-color:

.table1 tr:nth-child(1) td { background-color: red }
.table1 tr:nth-child(2) td { background-color: green }
.table1 tr:nth-child(3) td { background-color: blue }

Answer 6

You can use css selector :nth-child, but check it's compatibility.

tbody tr:nth-child(1) { background-color: #ffc000; }

Example: http://jsfiddle.net/SK4dV/

For IE8 and below you can add style atribute or classes by JavaScript or when generating table add classes for every row and add some css rules for it.