css - IE: nth-child() using odd/even isn't working

Question

My table (that works perfectly on Chrome, FireFox and Opera) is not displaying correctly on Internet Explorer.

The background remains white! (I am using IE-8)

CSS code:

/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}

.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}

.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}

.my_table tr:nth-child(even){
background:#E6EDF5;
}

.my_table tr:nth-child(odd){
background:#F0F5FA;
}

Answer 1

As a good workaround, jQuery has added this to their project and achieving this using JavaScript is acceptable:

For my CSS, I would have

.my_table tr.even{
    background:#E6EDF5;
}

.my_table tr.odd{
    background:#F0F5FA;
}

And I would use jQuery to do this:

$(document).ready(function() {
    $(".my_table tr:nth-child(even)").addClass("even");
    $(".my_table tr:nth-child(odd)").addClass("odd");
});