CSS background color of individual rows
-
11-06-2021 - |
Pergunta
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>
Nenhuma solução correta
Outras dicas
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());
});
});
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.
Check this fiddle - http://jsfiddle.net/r74j6/6/
Or this post - Apply different background color using jquery
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.