html - 表格布局 : have one row get all space required (because of rowspan)

Question

我有一些复杂的数据表，它们的布局存在问题:有一个单元格的行跨度跨所有其他行，但该单元格的内容高度可变，可能会超过所有所需的空间其他行。

像这样:

<table>
<tr><td style="height: 20px;">bla1</td><td rowspan="3">supa-col!</td></tr>
<tr><td style="height: 20px;">bla2</td></tr>
<tr><td style="height: 20px;">bla3</td></tr>
</table>

现在，让我们用更大的“supa-col”再次查看该表:

<table>
<tr><td style="height: 20px;">bla1</td><td rowspan="3" style="height: 200px;">supa-col!</td></tr>
<tr><td style="height: 20px;">bla2</td></tr>
<tr><td style="height: 20px;">bla3</td></tr>
</table>

渲染时发生的情况是，包含行跨度调用所需的额外 vspace 会在所有 单元格的高度上平均分布。

我更喜欢在最后一行的底部附加空间，这样第 1 行和第 2 行之间的距离就不会改变。换句话说:那个 supa-col 的大小不应该对所有其他调用的布局产生影响......(我也很乐意附加最后一行，它可以获得所需的所有 vetical 填充...)

(当然，在现实世界中，我并不会提前知道(或设定)高度...)

Answer 1

只需删除最后一个的高度属性...

 <tr><td>bla3</td></tr>