不寻常的表行大小

Question

我想要一个包含三行的HTML表格。中心排（B）的高度应尽可能小，以适应其内容。顶行和底行（A和C）应调整其高度以填充表的其余高度 。

在XAML中，这是通过使用Grid然后分别给予行A，B和C高度*，Auto和*来实现的。< / p>

我尝试在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/

Answer 2

<style type="text/css">
  .tbl{
     display:table;
}
  .row{
     display:table-row;
}
  .height40{
     height:40%;
}
  .width0{
     width:100%;
}
  .height-main{
     height:200px;
}

</style>


<div class="tbl width0 height-main">
  <div class="row height40">
  A
  </div>
  <div class="row">
  B
  </div>
  <div class="row height40">
  C
  </div>
</div>

注意：两行A＆amp; A不能使用50％的宽度。 C因为有三行而行B需要一些空间。