CODEWITHSUNDEEP
csscss-tables
kishore
kishore

Reputation: 1647

Alternate row color

I want to display alternate rows in different color. I have specified the color in CSS. And most of the rows are working properly.When I checked, rows are having either class="odd" or class="even" but some rows are having class="odd even" and class="even odd". How it is happening ? Could anyone explain why it is taking the class as "odd even" or "even odd". Thanks in advance. 

table.dataTable .odd { background-color:  red; }
table.dataTable .even { background-color: green;  }

Upvotes: 0

Views: 371

Answers (3)

Martijn
Martijn

Reputation: 16103

If you have to support the older browsers (like IE8), nth-child doesnt work. A simple workarround would be a combination of Kolink's and falguni's solution:

tr {background-color:white}
tr:nth-child(even), tr.even {background-color:black}

$(document).ready(function(){
  $("tr:even").addClass('even');
});

The solution falguni gave has a bad practice, it uses JS to update styles. If you decide it should not be black, but blue you would have to change two locations. My example does not need that.

My code can be improved, you could check if the user supports the :nth-selector, and IF NOT (add class) for performance.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try css

tr:nth-child(even) {
    background-color: #000000;
}

javascript

 $(document).ready(function()
    {
      $("tr:even").css("background-color", "#000000");
    });

OR

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Why are you even using classes for this?

tr {background-color:white}
tr:nth-child(even) {background-color:black}

Upvotes: 5

Related Questions