表格行中100％嵌套的div高度

Question

我想让这个表底行中的内部div填充表格的下半部分。任何帮助将不胜感激。

http://jsfiddle.net/6QGDn/1/

这就是我在Firefox 28.0中看到的

编辑：这是通过在底行的td上使用.relative类来解决的。问题解决了，谢谢你的帮助。

HTML

<table>
  <tr>
    <td>
      Top Row 1
    </td>
    <td>
      Top Row 2
    </td>
    <td>
      Top Row 3
    </td>
    <td>
      Top Row 4
    </td>
    <td>
      Top Row 5
    </td>
  </tr>
  <tr>
    <td class="no-border relative" colspan="5">
      <div class="left-half">
        <div class="div-td">
          Bottom Row 1
        </div>
      </div>
      <div class="right-half">
        <div class="div-td">
          Bottom Row 2
        </div>
      </div>
    </td>
  </tr>
</table>

CSS

table {
      width: 400px;
      height: 240px;
}
table, td, tr, .div-td {
      border: 1px solid #000;
}
.no-border {
      border: none;
}
.relative {
      position: relative;
      height: 50%;
}
.left-half {
      float: left;
      height: 100%;
      width: 50%;
}
.right-half {
     float: right;
     height: 100%;
     width: 50%;
}
.div-td {
     height: 100%;
}