Question

我正面临着IE和Chrome上发生的一个奇怪的错误。我有和应用程序加载信息矩阵但由于某种原因在特定情况下事情没有正确显示。通过配置我能够改变信息的显示方式，为此我使用rowspan和colspan。我没有使用任何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

你真的需要在这里使用表吗？它是用于电子邮件时事通讯吗？您可以使用display: inline-block;的div来获得没有表格的所需结果。

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

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

td {
    width: 132px;
}

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

Html ColSpan / RowSpan没有按预期工作

1 个答案: