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的大小不应该对所有其他调用的布局产生影响...... （我也很乐意添加最后一行，可以获得所需的所有填充物......）

（当然，在现实世界中，我不知道（或设定）提前的高度......）

Answer 1

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

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

Answer 2

你可以在td上使用vertical-align。 CSS

td {
  vertical-align: top;
}

或

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

表格布局：有一行获得所需的所有空间（因为rowspan）

2 个答案: