表单元格的宽度基于使用COLGROUP不作品COLGROUP不工作

Question

设置宽度表格单元中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>宽度不如IE9 colgroup。不知道为什么宽度不同。

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

Answer 1

你给表100％的宽度然后去固定宽度的cols。浏览器应该从哪里获取缺少的宽度？它只是拉伸表格单元格。

看看下面这个例子，工作在每一个主要的浏览器，从IE 5（！）:) http://jsfiddle.net/Volker_E/ppRgV/1/

的变化，从表中剥离width: 100%;并添加table-layout: fixed;

.Table { 
    table-layout: fixed; 
}