嵌套表不占用父td的100％高度

Question

我通过在table内写td来创建嵌套表。我希望table内的td应该占据父td的100％高度。我尝试了height:100%，但没有工作。

有没有办法让内部表格占据100％的高度，或者这是table默认行为？

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}

<table>
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这样做：

table {
  width: 100%;
  border-collapse: collapse;
  height: 100%; 
}

td {
  border: 1px solid red;
  vertical-align: top;
  height: 100%;
}

table table{
 height: 100%;
}

DEMO HERE

Answer 2

将height:100%添加到表格。

＆＃13;

＆＃13;

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table>
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

出于某种奇怪的原因，将height: 1px;设置为外部表可以解决问题。

它看起来像规范中的错误（因为所有浏览器都存在问题，并且解决方法也适用于所有主流浏览器）。

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
  vertical-align: top;
}

.outer-table {
  height: 1px;
}

.inner-table {
  height: 100%;
}

<table class="outer-table">
  <tbody>
    <tr>
      <td>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</td>
      <td>
        <table class="inner-table">
          <tbody>
            <tr>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
              <td>foobar</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>