我用以下标记创建了嵌套表,其中第一个表包含典型行的示例:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
这是相关的CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
在Firefox中,呈现方式如下:
但在IE6中,它呈现为:
IE中发生两件事:
每个表都缺少右边框。
尽管这些单元格为“图像”类,并且固定宽度为75px,但右列中的第二张和第三张表格的最后一列具有任意大小。
任何意见是极大的赞赏。
编辑:#rightColumn表,#leftColumn表{宽度:100%;背景:红色}
最佳答案
检查IE是否呈现您的页面处于怪癖模式。怪癖模式通常会特别影响元素的宽度,因此,我建议这是导致问题原因的非常有力的候选人。
您应该确保页面处于标准模式下才能正确呈现。
通过确保页面顶部具有有效的文档类型,可以轻松完成此操作。
如果您没有文档类型,则可以添加任何有效的文档类型以使其在标准模式下工作,但是如果您不确定要使用哪个文档类型,只需使用以下命令:
<!DOCTYPE html>
希望能有所帮助。