html - Unusual table row-sizing

Question

I want to have an HTML table with three rows. The center row (B) should size its height to as small as possible to fit its contents. The top and bottom rows (A and C) should size their height to fill the rest of the height of the table with equal heights.

In XAML this accomplished by using a Grid and then giving the rows A, B, and C the heights *, Auto, and *, respectively.

I tried using heights 50%, auto, and 50%, respectively, in the HTML/CSS. But that causes row A to fill up half the height of the table, with B and C filling the bottom half.

How can I get the row heights I want using 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 和 C 两行不能使用 50% 的宽度，因为共有三行，B 行需要一些空间。