html - 如何相互独立地扩展 tds？

Question

我必须为(部分)作业执行此操作。我个人永远不会使用这样的表格，如果可以选择，我总是会使用 div，但我必须使用表格进行分配。

这是我需要重新创建的一个非常简化的版本:

但这是我能做的最好的:

tds 总是希望相互扩展。此外，这需要使用单个表来完成。除了高度之外，我还尝试过乱用 rowspan 等，但我什至无法接近所需的结果。是否有某种我不知道的属性可以简化此类布局？

我目前的做法是两行两列。

Answer 1

我最好的猜测是使用两列三行和行跨度:

<table>
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <!-- the cell above extends into here -->
        <td rowspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <!-- the cell above extends into here -->
    </tr>
</table>

让高度发挥作用可能是个问题，尤其是在旧版浏览器上，但实现这一目标的最佳方式通常取决于单元格的内容。