html - 不寻常的表行大小

Question

我想要一个包含三行的 HTML 表格。中心行 (B) 的高度应尽可能小以适合其内容。顶行和底行(A 和 C)的高度应调整为以相同的高度填充表格的其余高度。

在 XAML 中，这是通过使用 Grid 然后为行 A、B 和 C 指定高度 *、Auto 和*，分别。

我尝试在 HTML/CSS 中分别使用高度 50%、auto 和 50%。但这会导致 A 行填满表格高度的一半，而 B 和 C 填满下半部分。

如何使用 HTML/CSS 获得我想要的行高？

Answer 1

在所需行的单元格上将高度设置为 1em。

HTML:

<table class="testing">
    <tr id="one"><td>one</td></tr>
    <tr id="two"><td>two<br/>two two</td><div id="breakme"></div></tr>
    <tr id="three"><td>three</td></tr>
</table>

CSS:

.testing {
    color: white;
    font-weight: bold;
    height: 300px;
}

#one td {
    background-color: red;
}

#two td { background-color: blue; height: 1em }

#three td { background-color: green; }

#breakme {
    background-color: pink;
    margin: 5px;
    height: 30px;
}

示例:http://jsfiddle.net/a65vn/1/