Width of Table cell based on colgroup not working

Question

Setting width for table cell using colgroup not works in IE9

<table id="Grid1_Table" class="Table">
    <colgroup>
        <col style="width:20px">
        <col style="width:20px">
        <col style="width:180px">
        <col style="width:200px">
    </colgroup>
    <tbody>
        <tr>
            <td class="RowHeader"><div>&nbsp;</div></td>
            <td class="RecordPlusCollapse"><div>&nbsp;</div></td>
            <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
        </tr>
    </tbody>
</table>

.RowHeader
{
    background-color : black;
}
.GroupCaption
{ 
    background-color : #868981;
}
.RecordPlusCollapse
{
    background-color : red;
}
.Table{
    width: 100%;
}

First 2 <td> width is not as colgroup in IE9. Not sure why width differs.

http://jsfiddle.net/KgfsM/3/

Answer 1

You are giving the table 100% width and then go for fixed width cols. Where should the browser take the missing width from? It simply stretches the table cells.

Look at this example, works in every major browser, starting with IE 5(!) :) http://jsfiddle.net/Volker_E/ppRgV/1/

Changes were stripping width: 100%; from table and adding table-layout: fixed;

.Table {
   table-layout: fixed;
}