How to vary shade of specific table row id

Question

I am generating a table using Ruby on Rails. It is easy enough to color odd/even rows differently using css. It is also easy to color rows of a specific id/class a given color. I have the need to shade rows on a table based on id. My question is, how do I alternate the colors of that id, IE: alternate different shades of the same color for a given id?

#owner tr:nth-of-type(odd){ background:#eee !important;}

CSS of this nature does not work. Is my only solution JS/JQ? Highly prefer pure CSS solution.

Answer 1

If I understood your question right you can use rgba to shade the color.

• background-color: rgba(0, 0, 0, 1.5); // darker
• background-color: rgba(0, 0, 0, 1.0); // normal
• background-color: rgba(0, 0, 0, 0.5); // lighter

css

.table-class {
width: 500px;
font-size: 15px;
}

.table-class td {
width: 25%;
}

#owner tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 1.2);
color: rgba(255, 255, 255, 0.8);
}

#owner tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.8);
color: rgba(255, 255, 255, 1.2);
}

html

<table class="table-class" id="owner">
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
</table>

JSFiddle you can play around with it to see if this is what you need.

http://jsfiddle.net/t4J9s/