DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

CSS background color of individual rows

StackOverflow https://stackoverflow.com/questions/10811634

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?

enter image description here

<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>

No correct solution

OTHER TIPS

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/

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.

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;
}

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 }

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow