html - 我可以在表格的最后一行使用行跨度吗？

Question

我想制作一个 3 x 3 的表格，其中单元格 4 跨越下方 2 行，并在单元格 3 下方插入单元格 5。我尝试添加一个新行并向其中添加一个单元格，它占据单元格 3 的跨度(相邻到单元格 4)，而不是直接在它下面。

问题是，我如何跨越下面的单元格 4(使其成为 2 x 2)并在其旁边添加单元格 5？

到目前为止的代码:

 <table border = "1" cellpadding="10">

    <tr>
      <td>Cell1</td>
      <td>Cell2</td>
      <td rowspan = 2>Cell3</td>
    </tr>
    <tr>
      <td rowspan = "2" colspan = "2">Cell4</td>
    </tr>

</table>

我想做这样的事情:

如有任何帮助，我们将不胜感激!

Answer 1

再加一个<tr> .

我添加了一些 css 以使其更明显:

tr{
    height: 25px;
}

这是一个 fiddle .简要说明。

解释:

如果删除了 css，您会注意到 almost 行消失了。那是因为你几乎没有在那条线上的任何东西。如果您有另一列单元格(可见或不可见)实际使用该行，则该行将变为可见。

发生这种现象是因为单元格的高度是自动的，因此当它为空时它会收缩为 0，在您的情况下会发生这种情况，因为没有单元格只在上述行上传播。

编辑:

曾经有一种只有 html 的方法，通过在表格元素内设置高度，但据推测它在 HTML5 中已被弃用，应该不惜一切代价避免。请改用 css!如果出于某种原因，你真的需要旧的 html 解决方案，它会显示 here .但使用它是一种非常非常非常糟糕的做法，并且它可能与某些浏览器等不兼容。

同样适用于border = "1" cellpadding="10"正如评论中指出的那样:)