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 占据剩余空间。

JsFiddle 中的 DEMO

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

Answer 1

您应该在 css 中设置 td 的高度。因此，您不需要为#A.

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

这是小提琴

Answer 2

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

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