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 do i apply Table Header color to Table body using JQuery

    how do i avoid this title from overflowing?

    how can I use CSS to hover over an entire list element including the bullet?

    css: how to draw circle with text in middle?

    How do I center a button in html5?

    How to give equal width for all the fields in the form with validations?

    How Do I Trigger My jQuery Event?

    How to stop css image slideshow at last image?

    How can I send a Jquery var to be used in a CSS property

    how to replace url in css using regexp (javascript)

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How do I select all elements of a specific class name?

    How to make SVG clip-path work correctly in Google Chrome?

    how to use css button to post method in a form?

    CSS - How to align content to middle using bootstrap?

    How to resize all div images to a particular size?

    how to change css style for every second data (picture) from database?

    How to create a tag using css

    Gulp callback - How to tell Gulp to run a task first before another?

    How can i see or how do i know where to put the control according to the screen when using css?

    How can I zoom this gallery without moving the other pictures?

    How do I get my Bootstrap webpage to have a full width

    How do I create a clickable button or link inside an tag and still be right-clickable?

    How to center the Nav-Bar

    How to Make DD Wrap under DT When DD Content has No Spaces

    How do I correct this error?

    How to make two lines text inside list-item element of bootstrap? [closed]

    How to reset margin-bottom to its default value

    show different content in multiple css popups

    How to create four even and fluid css columns?