Html ColSpan/RowSpan 未按预期工作

Question

我遇到了一个在 IE 和 Chrome 上都发生的奇怪错误。我有一个加载信息矩阵的应用程序，但由于某种原因，在特定情况下，事情没有正确显示。通过配置，我能够更改信息的显示方式，为此我使用行跨度和列跨度。 我没有使用任何Javascript，只是html。这张图片显示了正在发生的事情：

抱歉仍然无法发布图片，但这是小提琴 http://jsfiddle.net/gondias/22o07mbt/

<table cellspacing="6" cellpadding="0" style="width:558px; background-color:red">
    <tr>
        <td colspan="3" rowspan="2">
            <div class="tile_3x2"></div>
        </td>
        <td colspan="1" rowspan="2">
            <div class="tile_1x2"></div>
        </td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="2" rowspan="2">
            <div class="tile_2x2"></div>
        </td>
        <td colspan="2" rowspan="2">
            <div class="tile_2x2"></div>
        </td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="4" rowspan="1">
            <div class="tile_4x1"></div>
        </td>
    </tr>
    <tr>
        <td colspan="4" rowspan="1">
            <div class="tile_4x1"></div>
        </td>
    </tr>
</table>

由于某种原因，第二行中的第一个单元格被扩展，推动了下一个单元格。 如果您有任何问题，请告诉我。

我认为 rowspan/colspan 的用法是正确的。有谁知道这里发生了什么。 感谢您的帮助，我在这里真的很挣扎。

Answer 1

您真的需要在这里使用表格吗？它用于电子邮件通讯吗？ 您可以将 div 与 display: inline-block; 一起使用，无需表格即可获得所需的结果。

如果你真的需要采取这种方式（不推荐），这是你的解决方案：

http://jsfiddle.net/rcdmk/22o07mbt/1/

td {
    width: 132px;
}

如果您在TD 标签上放置边框，您将看到那里发生了什么。单元格（列）没有特定的宽度，因此浏览器必须根据内容进行猜测，这不是浏览器之间的一致行为。您只需为单元格指定宽度即可。