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"); });