CSS not working in IE but works in Chrome - html

Question

I am trying to alternate table row colors by odd and even rows. Seems simple and it works fine in chrome but when I test in IE nothing changes. The weirdest thing is, it originally did work in IE, but suddenly stopped and I can't get it to work again. Here is the CSS I am using. Any ideas why this wouldn't be working?
.styleIntr {
white-space: nowrap;
margin-top: 5px;
background-color: #DFF0F9;
margin-bottom: 5px;
border: 1px solid #CCC;
height: 320px;
z-index: 1;
font-size: 9pt;
color: #000;
padding-left: 50px;
padding-right: 50px;
}
.styleIntr tr:nth-child(odd) td{
background: #DFF0F9;
}
.styleIntr tr:nth-child(even) td{
background: #EFF7FB;
}
here is the HTML:
<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">
<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3> </TD></TR>
</TBODY>
</table>

Answer 1

You can trying to alternate table row colors by odd and even rows but your style is incorrect you have add this css to rows td. so remove td like this
First Use this
<style>
.styleIntr tr:nth-child(odd){
background: #DFF0F9;
}
.styleIntr tr:nth-child(even){
background: #EFF7FB;
}
</style>
OR
If IE8 doesn't support the nth-child
use this code
<script>
$(document).ready(function() {
$(".styleIntr tr:nth-child(even)").addClass("even");
$(".styleIntr tr:nth-child(odd)").addClass("odd");
});
</script>
<style>
.styleIntr tr.odd{
background: #DFF0F9;
}
.styleIntr tr.even{
background: #EFF7FB;
}
</style>
you can check this fiddle.
https://jsfiddle.net/foku4qa3/
If IE does not support then use this one.
<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">
<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3> </TD></TR>
</TBODY>
</table>
<script>
$(document).ready(function() {
$(".styleIntr tr:odd").addClass("odd");
$(".styleIntr tr:even").addClass("even");
});
</script>
<style>
.styleIntr tr:nth-child(odd){
background: #DFF0F9;
}
.styleIntr tr:nth-child(even){
background: #EFF7FB;
}
.styleIntr tr.odd{
background: #DFF0F9;
}
.styleIntr tr.even{
background: #EFF7FB;
}
</style>