使内部桌子高度100%到父td

时间:2017-01-24 11:08:22

标签: html css

我需要将内部表格高度设为父级td的100%高度。 因为我正在使用一些具有复杂数据结构的角度ng-repeat。我没有选择更改html结构。

请帮我解决如何将内表设置为父td的100%高度的方法。我尝试了很多选择,但没有工作。



.parent {
  border: 1px solid #000;
  border-collapse: collapse;
}
.parent td,
.parent tr,
.parent th {
  border: 1px solid #000;
}
.inner {
  height: 100%;
}

<table class='parent'>
  <tr>
    <th>head</th>
    <th>head</th>
    <th>Description</th>
    <th>
      <table>
        <tr>
          <th>head</th>
          <th>head</th>
          <th>head</th>
          <th>head</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr>
    <td>values</td>
    <td>values</td>
    <td>Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes
      here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here, Description goes here,</td>
    <td>
      <table class='inner'>
        <tbody>
          <tr>
            <td>H1 Val</td>
            <td>H2 Val</td>
            <td>H3 Val</td>
            <td>H4 Val</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

将.parent的高度也设置为100%即可。

因此;

    .parent{
      border:1px solid #000;
      border-collapse:collapse;
      height: 100%;
    }