How to vary shade of specific table row id


Tags: html,css

Problem :

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.



Solution :

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/


    CSS Howto..

    How to disable scrollbars in Webmethods 8?

    How can I replace the text in an

    from a CSS file without using a tag?

    CSS Less changes not showing. Compile or IIS error?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    How to put div block into right screen area using css?

    How can I hide a button when scrolled to the top of a page?

    how to set css for Zend form?

    How to select first a element of li with CSS?

    How to fix animation problems css3

    how to display only 100 rows of 1000 from a database with options to go to next 100 and previous 100 in html/php/css/js [closed]

    Email-box shows at “random” place

    How to specify correct output folder for CSS using SASS & LiveReload?

    How to get css 3 column layout with floats and no margins?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?

    How do I display menu items in front of images?

    How could I add a header to a HTML page via CSS?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    how to put an image upon a image in a li which (on hover) changes its z-index

    How to apply :hover on :after to certain div in CSS

    How to apply CSS styles to links that appear in table headers?

    How to get the Apple Javascript Split Flap Counter to run on pure CSS

    how to put text on the middle of an image

    show html element before sending ajax sync request

    How to add space after a colon in CSS with Sublime Text 2?

    how to select the 2nd child Div of a div using CSS

    How can i get height form window top to my click point(a tag) on window using css or jquery or php?

    how to replace entire css text with another?

    Show just cursor (caret) but hide the letters in input

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?