Colgroup tag not working in IE8

Question

I am trying to create a data table, where I am facing few issues with styling.

1) I am trying to apply alternating row to TR which is not firing.

Is there any way to apply the alternating style without passing the class to all the TD's
with in each TR..?

2) Colgroup is working in IE8, particularly with alignment (cols=A&SI Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)

Is there any way to apply fix this issue

Here is the code: http://jsfiddle.net/yvJ75/1/

Answer 1

You can use CSS3 pseudo-classes nth-child(odd) and nth-child(even).

I have updated the code here: http://jsfiddle.net/yvJ75/12/

These are the changes in the CSS

/*
.bg-oddrow {
    background-color:#fbfcfb !important;
}

.bg-evenrow {
    border-bottom:1px solid #dadada !important;
}*/
table tr:nth-child(odd) td{
    background-color:#fbfcfb !important;
}
table tr:nth-child(even) td{
    border-bottom:1px solid #dadada !important;
}

Answer 2

Is there any way to apply the alternating style without passing the class to all the TD's with in each TR..?

Yes - you can apply the class like <tr class="even-row"> and use a css selector like tr.even-row td to apply background to <td>. This approach works in all browsers. You could even use tr:nth-child(odd) and tr:nth-child(even), but this are css3 pseudo classes.

Colgroup is working in IE8, particularly with alignment (cols=A&SI Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var) Is there any way to apply fix this issue

You mean it's not working? Columns accept only border, background, width and visibility css properties. Td's won't inherit other properties since they are not a direct descendant of the col element (a bit on understanding this can be found here). The most solid way is to set a class on td and style the td contents trought that.