我可以在表格的最后一行使用行间距吗？

Question

我想制作一个3 x 3的表，其中Cell 4跨越2行并在Cell 3下面插入Cell 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，您会注意到几乎行已消失。那是因为你几乎没有任何东西在那条线上。如果您有另一列单元格（可见或不可见）实际使用该行，则该行将变为可见。

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

编辑：

过去只有一种html方式，通过在表格元素中设置高度，但从HTML5开始，它应该被弃用，应该不惜一切代价避免。请改用css！如果出于某种原因，您真的需要旧的仅限html的解决方案，则会显示here。但是使用它是一种非常非常非常糟糕的做法，它可能与某些浏览器等不兼容。

同样适用于border = "1" cellpadding="10"，如评论中所述：）

Answer 2

首先需要一个不可见的间隔柱。

另外，这是一个小提琴：http://jsfiddle.net/tnc1z531/

<style>
    td
    {
        padding: 5px;
        border: 1px solid black;
    }
    .spacer
    {
        border: 0;
        padding: 0;
        height: 30px;
    }
</style>
<table>
    <tr>
        <td class='spacer'></td>
        <td>Cell1</td>
        <td>Cell2</td>
        <td rowspan=2>Cell3</td>
    </tr>
    <tr>
        <td class='spacer'></td>
        <td rowspan="2" colspan="2">Cell4</td>
    </tr>
    <tr>
        <td class='spacer'></td>
        <td>Cell5</td>
    </tr>
</table>