我使用以下标记创建了一些嵌套表，其中第一个表包含行的示例。span 内部 HTML 最终被用户通过下拉菜单选择的图像替换。
<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="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：
.outer
{
border: none;
margin-left: auto;
margin-right: auto;
}
.outer td
{
vertical-align: top;
}
.column
{
border: none;
}
#rightColumn table, #leftColumn table
{
width: 100%;
}
.cell
{
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
overflow: hidden;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding-left: 3px;
padding-right: 3px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 10pt;
}
.cell .image
{
padding: 0;
margin: 0;
height: 20px;
width: 65px;
}
下面是它在标准遵从模式下在 IE8 中的显示截图：
请注意，在右侧列的第 3 和第 4 个表中，最右侧的图像字段具有任意宽度（在图像的任一侧显示空白），尽管这些单元格都是 class="image" 并且应该具有固定宽度为 65px。DOCTYPE 声明是呈现的 HTML 的第一行，我在开发人员工具中检查了 IE8 的模式符合标准。
我真的很想修复这两个表格单元格。任何建议表示赞赏。
问候。
编辑：这是受影响表的 HTML：
<table class="cell" id="t5">
<tr><th colspan="9"><strong><asp:Literal runat="server" ID="t5r0c0" /></strong></th></tr>
<tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t5r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t5r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t5r1c8" /></td></tr>
<tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t5r2c6" /></td></tr>
<tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t5r3c6" /></td><td class="image"><span id="s21" runat="server"><asp:PlaceHolder ID="p21" runat="server"></asp:PlaceHolder></span></tr>
</table>
<table class="cell" id="t6">
<tr><th colspan="9"><strong><asp:Literal runat="server" ID="t6r0c0" /></strong></th></tr>
<tr><td class="orange" colspan="4"><asp:Literal runat="server" ID="t6r1c0" /></td><td class="blue" colspan="4"><asp:Literal runat="server" ID="t6r1c4" /></td><td class="blue span2" rowspan="2"><asp:Literal runat="server" ID="t6r1c8" /></td></tr>
<tr><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c0" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c2" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c4" /></td><td class="blue" colspan="2"><asp:Literal runat="server" ID="t6r2c6" /></tr>
<tr><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c0" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c2" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c4" /></td><td class="green" colspan="2"><asp:Literal runat="server" ID="t6r3c6" /></td><td class="image"><span id="s22" runat="server"><asp:PlaceHolder ID="p22" runat="server"></asp:PlaceHolder></span></td></tr>
</table>
编辑：将 style="width: 100%" 添加到所有 colspan=2 元素：
这样做的效果在两个受影响的表上是不同的。第一列大大扩展，而其他列大大减少。