基于 colgroup 的表格单元格的宽度不起作用答案

【问题标题】：Width of Table cell based on colgroup not working基于 colgroup 的表格单元格的宽度不起作用
【发布时间】：2012-12-08 09:22:07
【问题描述】：

使用 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> 宽度与 IE9 中的 colgroup 不同。不知道为什么宽度不同。

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

【问题讨论】：

@Sridar Narsimhan 如果您同意这个答案，如果您通过单击复选标记符号接受它会很棒。见stackoverflow.com/help/someone-answers

标签： html css html-table

【解决方案1】：

您给表格 100% 宽度，然后选择 固定宽度列。浏览器应该从哪里获取缺少的宽度？它只是拉伸表格单元格。

看看这个例子，它适用于所有主流浏览器，从 IE 5(!) 开始：) http://jsfiddle.net/Volker_E/ppRgV/1/

更改是从表中删除 width: 100%; 并添加 table-layout: fixed;

.Table {
   table-layout: fixed;
}

【讨论】：