0

我正面临 html Table 元素单元格宽度的问题。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>&nbsp;</div></td>
    <td class="RecordPlusCollapse" ><div>&nbsp;</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/

你能检查一下吗？

4

1 回答 1

1

首先，标记违反了HTML表格模型；如果您尝试使用 HTML5 doctype 验证代码片段（并</table>添加了缺失的），验证器将报告错误“由元素 col 建立的表列 4 中没有以开头的单元格。”

其次，您将列宽（以像素为单位）和总表格宽度设置为 100%。这构成了一个无法满足的请求，除非在非常特殊的情况下可用宽度恰好与像素宽度加上边框、边框间距和单元格间距的总和一致。难怪浏览器对此的反应不同。

因此，您需要一致地指定宽度。删除 100% 宽度的设置，或删除至少一项列宽设置。您可能仍然有问题（浏览器可能对此做出不同的反应），并且table-layout: fixed可能无济于事（或可能会引入新问题），但随后会出现一个新的、相对明确定义的问题。

于 2013-02-20T05:35:30.157 回答