asked on

Alternate table rows using css

I have this code to alternate table rows in CSS, but it does not work. Any ideas?

<style type="text/css">
body {
font: normal medium/1.4 sans-serif;
}
table {
border-collapse: collapse;
width: 100%;

}
th, td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
</style>
</head>

<body>

<table width="100%" border="1" cellspacing="5" cellpadding="5">
<tr>
<td>fdsafds</td>
<td>fdsa</td>
</tr>
<tr>
<td>afsd</td>
<td>fda</td>
</tr>
<tr>
<td>dasf</td>
<td>fdas</td>
</tr>
<tr>
<td> </td>
<td>fdas</td>
</tr>

</table>

ASKER CERTIFIED SOLUTION

Kyle Abrahams, PMP

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BHUC

ASKER

That doesn't work either. I have actually copied and pasted the code in the sample you gave me and it doesn't work either.

Kyle Abrahams, PMP

is your browser CSS3 compatible? (EG: IE11 or better, Chrome, firefox?)

Can you post a link to the page?

BHUC

ASKER

That's it.... thanks... worked in chrome - not in IE

BHUC

ASKER

Anything for something not compatible with CSS3?

Kyle Abrahams, PMP

Jquery or javascript. Found the below online:

function altrows(classname,firstcolor,secondcolor)
{
   var tableElements = document.getElementsByClassName(classname) ;
   for(var j= 0; j < tableElements.length; j++)
   {
      var table = tableElements[j] ;

      var rows = table.getElementsByTagName("tr") ;
      for(var i = 0; i < rows.length; i++)
      {
        rows[i].bgColor = (i%2==0) ? firstcolor : secondcolor ;
      }
   }
}

Open in new window