html - 表格单元格不占用100％的高度

我有：
http://jsfiddle.net/#&togetherjs=8b9rFEijb5

<table>
<tr >
    <td>
        <b> this </b><br/>
        <b>is</b><br/>
        <b>long</b><br/>
         text
    </td>
    <td>
       <table style='height:100%'>
           <tr style='height:100%'><td style='background-color:red;height:100%;width:100%;' > &nbsp;</td></tr>
           <tr style='height:100%'><td style='background-color:green;height:100%;width:100%;'> &nbsp;</td></tr>
        </table>
    </td>
</tr>

我希望右单元格中的表占用所有可用空间。我希望height:100%意味着它要占用父母标签的所有可用高度-但这似乎不对。

最佳答案

尝试这个。当左td内部文本将被固定时，这很有用。

table td {
  border: 1px solid Red;
}

.one {
  background-color: red;
}

.two {
  background-color: green;
}

table table {
  height: 73px;
}

<table>
  <tr>
    <td>
      <b> this </b>
      <br/>
      <b>is</b>
      <br/>
      <b>long</b>
      <br/>text
    </td>
    <td>
      <table>
        <tr>
          <td class="one">&nbsp;</td>
        </tr>
        <tr>
          <td class="two">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

关于html - 表格单元格不占用100％的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26016121/