如何互相独立缩放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

可以利用行跨度属性：

这里有一个例子：

我增加了一些高度看起来更像你连接的图片。

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

这里是解决

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

可以用......类内嵌S型比代码解决方案

Answer 5

更好，我喜欢写下来算法：

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

完成（OK我没有描述如何合并单元格，但它应该是比独电网更容易;）

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

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