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>

让高度专门工作可能是一个问题，尤其是在旧浏览器上，但最好的方法通常取决于单元格的内容。

Answer 2

您可以利用 rowspan 属性：

这是一个示例：

我增加了一些高度，看起来更像你附上的图片。

<table border="1">
    <tr>
        <td rowspan="2" height="200">1</td>
        <td height="50">A</td>
    </tr>
    <tr>
        <td rowspan="2" height="200">B</td>
    </tr>
    <tr>
        <td height="50">2</td>
    </tr>
</table>

http://jsfiddle.net/vmm2y/

Answer 3

这是解决方案

    <table border="1" width="500">
<tr>
    <td rowspan="2" style="height:200px">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td rowspan="2" style="height:200px">&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
</tr>

你可以使用 ......class 作为内联类型

Answer 4

比代码解决方案更好，我更喜欢写下算法：

• 每次您可以在任何列中发现水平边框，而不是新行。
• 每次您可以在任何行中发现垂直边框，而不是新列。
• 完成后，您必须将所有没有边框的单元格组合在一起。

完成（好吧，我没有描述如何合并单元格，但它应该比数独网格更容易；）

编辑：在这里你有 2 个水平边框（和表格的底部），所以 3 行。1个垂直边框（全高，所以colspan最终代码中没有）和表格的右边框：2列。

Answer 5

你可以试试这个：

<table border="1">
<tr>
    <td>$100</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
</tr>
<tr>
    <td>$100</td>
    <td rowspan="2">$80</td>
</tr>
<tr>
    <td>$100</td>
    <td>$80</td>
</tr>

Answer 6

工作小提琴

正如您提到的，您想使用div's 来实现这一点，我创建了一个。

HTML

<div id="first">
   <div id="leftTop"></div>
   <div id="leftBot"></div></div>
<div id="second">
   <div id="rightTop"></div>
   <div id="rightBot"></div>
</div>

CSS

#left,#right{
      float:left;
      width:150px;
      height:300px;
      border:2px solid black;
}
#leftTop{
      height:250px;
      border-bottom:2px solid black;
}
#rightTop{
      height:50px;
      border-bottom:2px solid black;
}

工作小提琴