如何在垂直跨越两个单元格的行内均匀分布单元格高度？

Question

我有一个包含以下html结构的表：

<table>
<tr>
  <td rowspan=2>A (This is a dynamic column. I don't know its height).</td>
  <td>B</td>
  <td rowspan=2>D</td>
  <td>E</td>
</tr>
<tr>
  <td>C</td>
  <td>F</td>
</tr>
</table>

如果单元格A的高度为200px，则使用Firefox 19.0浏览器查看时，单元格B，C，E和F将均匀分布到100px的高度。但是，Google Chrome 25.0会显示相同的表格，其中单元格B和E的高度恰好足以包含其内容，单元格C和F占用剩余空间。

DEMO in JsFiddle

我的问题是，如何在不指定CSS中的单元格高度的情况下均匀分布这些单元格的高度？ 修改：我的目标是让细胞A在高度变化时均匀分布内部细胞。

Answer 1

您应该在css中设置td的高度。因此，您无需为#A指定高度。

如果您想将cell A的高度设置为100px，请将td高度设置为50px

以下是fiddle

Answer 2

我有同样的问题。以下是我的数据表在IE8和IE中的外观。 FF23 第二张图片是它在Chrome＆amp; Opera（注意蓝色突出显示底行如何扩展以填充高度）。

答案是你不能尽我所能。这是底层浏览器如何处理标准。 IE＆amp; FF将右侧的细胞均分为Chrome和＆amp; Opera只是扩展了底部单元以填充高度。您可以做的最好是将底行垂直对齐到顶部，这样至少所有数据都在一起。