Alternate table row color using CSS?

Question

I am using a table with alternate row color with this.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Here I am using class for tr, but I want to use only for table. When I use class for table than this apply on tr alternative.

Can I write my HTML like this using CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

How can I make the rows have "zebra stripes" using CSS?

Answer 1

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:

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

Note: No support in IE 8.

Or, if you have jQuery:

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

Answer 2

There is a fairly easy way to do this in PHP, if I understand your query, I assume that you code in PHP and you are using CSS and javascript to enhance the output.

The dynamic output from the database will carry a for loop to iterate through results which are then loaded into the table. Just add a function call to the like this:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

then add the function to the page or library file:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}    

}

Now this will alternate dynamically between colors at each newly generated table row.

It's a lot easier than messing about with CSS that doesn't work on all browsers.

Hope this helps.

Answer 3

You have the :nth-child() pseudo-class:

table tr:nth-child(odd) td{
}
table tr:nth-child(even) td{
}

In the early days of :nth-child() its browser support was kind of poor. That's why setting class="odd" became such a common technique. In late 2013 I'm glad to say that IE6 and IE7 are finally dead (or sick enough to stop caring) but IE8 is still around—thankfully, it's the only exception.