Question

有人可以帮我设置整张桌子的相对高点吗？请查看我的fiddle。

关于我想要达到的目标的一些解释：

单元格1的高度应为总桌面高度的40％（= 200px）
细胞2的高度应为细胞1总高度的30％（= 60px）
细胞3的高度应为细胞1总高度的70％（= 140px）
单元格4的高度应为总桌面高度的60％（= 300px）
细胞5的高度应为细胞4总高度的20％（= 60px）
细胞6的高度应为细胞4总高度的40％（= 120px）
细胞7的高度应为细胞4总高度的40％（= 120px）

所有这些定义都应该是相对的。

Answer 1

您可以使用jQuery http://jsfiddle.net/prabhavithreddy/K4Q4H/

进行尝试

Answer 2

解决方法是计算每个较小单元格的高度，使其相对于总高度：

单元格2的高度应为总高度的12％（= 60px）
单元格3的高度应为总高度的28％（= 140px）
单元格5的高度应为总高度的12％（= 60px）
单元格6的高度应为总高度的24％（= 120px）
单元格7的高度应为总高度的24％（= 120px）

是的，不完美，但纯粹的css溶液。

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>    
<table border="1">
    <tr style="height:12%">
      <th rowspan="2">Cell 1</th>
      <td>Cell 2</td>
    </tr>
    <tr style="height:28%">
      <td>Cell 3</td>
    </tr>
        <tr style="height:12%">
      <th rowspan="3">Cell 4</th>
      <td>Cell 5</td>
    </tr>
    <tr style="height:24%">
      <td>Cell 6</td>
    </tr>
    <tr style="height:24%">
      <td>Cell 7</td>
    </tr> 
</table>
</body>
</html>

演示：http://jsfiddle.net/5ZX7t/1/

具有rowspan的表的相对高度

2 个答案: