Question

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

这是我需要重新创建的非常简化的版本： enter image description here

但这是我能做的最好的事情：

enter image description here

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

我目前的方法是有两行两列。

Answer 1

我最好的猜测是在两列中使用三行，并使用rowspan：

<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>

你可以使用......类用于内联stype

Answer 4

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

每次都可以在任何列中找到水平边框，而不是新行。
每次你可以在任何一行发现一个垂直边框，而不是一个新列。
当它完成后，你必须将所有没有边框的单元格中的rowspan / colspan组合在一起。

完成（好的我没有描述如何合并单元格，但它应该比 sudoku 网格更容易;）

编辑：这里有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

<强> Working Fiddle

正如您所说，您希望使用div来实现这一目标，我创建了一个。

<强> 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;
}

<强> Working Fiddle

如何相互独立地扩展tds？

6 个答案: