Szerokość komórki tabeli na podstawie COLGROUP nie działa

Question

ustawienie szerokości do komórki tabeli przy użyciu COLGROUP nie działa w 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%; 
} 

pierwsze 2 <td> szerokość nie jest tak colgroup w IE9. Nie wiem, dlaczego szerokość się różni.

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

Answer 1

Dajesz stołu 100% szerokości, a następnie przejść do stałej szerokości przełęcze. Skąd w przeglądarce należy pobrać brakującą szerokość? Po prostu rozciąga komórki tabeli.

Spójrz na ten przykład działa w każdym większym przeglądarce, począwszy od IE 5 (!) :) http://jsfiddle.net/Volker_E/ppRgV/1/

Zmiany zostały stripping width: 100%; z tabeli i dodanie table-layout: fixed;

.Table { 
    table-layout: fixed; 
}