我正面临着html表格元素单元格宽度的问题。在IE8和IE9中,表格单元的宽度不同。请找到以下代码片段,其中我使用表colgroup将表单元格的宽度设置为100%。
[HTML]
<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> </div></td>
<td class="RecordPlusCollapse" ><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
[CSS]
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table
{
width:100%;
}
请参考下面的提琴手文件,以检查IE8和IE9的问题。
http://jsfiddle.net/KgfsM/21/
你能检查一下吗?
最佳答案
首先,标记违反了HTML表模型;如果您尝试使用HTML5 doctype验证代码段(并添加了丢失的</table>
),则验证器将报告错误“由元素col建立的表第4列中没有任何单元格。”
其次,您将以像素为单位设置列宽,并将表的总宽度设置为100%。这构成了无法满足的请求,除非在非常特殊的情况下,可用宽度恰好与像素宽度加上边框,边框间距和像元间距的总和一致。难怪浏览器对此有不同的反应。
因此,您需要一致地指定宽度。删除100%宽度的设置,或者删除至少一项列宽设置。您可能仍然有问题(浏览器对此可能会有不同的反应),并且table-layout: fixed
可能无济于事(或可能引入新的问题),但是随后会出现一个相对明确的新问题。
关于html - IE 9及更高版本的行为与html表元素不同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14972818/