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

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

我也有同样的问题。这是我的数据表在 IE8 和 FF23 中的样子第二张图片是它在 Chrome 和 Opera 中的样子(注意蓝色突出显示底行如何扩展以填充高度)。

据我所试，答案是你做不到。这就是底层浏览器对待标准的方式。 IE 和 FF 将在右侧平均划分单元格，而 Chrome 和 Opera 只是扩展底部单元格以填充高度。您可以做的最好的事情是将底部行垂直对齐到顶部，这样至少所有数据都在一起。