Ширина ячейки таблицы на основе негруппированной группы

Ширина настройки для ячейки таблицы с использованием colgroup не работает в 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%;
}

Первая ширина 2 <td> не равна colgroup в IE9. Не знаю, почему ширина отличается.

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

Ответы

Ответ 1

Вы предоставляете таблицу шириной 100%, а затем идите для колонок с фиксированной шириной. Где браузер должен пропускать недостающую ширину? Он просто растягивает ячейки таблицы.

Посмотрите на этот пример, работайте в каждом главном браузере, начиная с IE 5 (!):) http://jsfiddle.net/Volker_E/ppRgV/1/

Изменения были сняты width: 100%; из таблицы и добавлены table-layout: fixed;

.Table {
   table-layout: fixed;
}