html - 嵌套表不占用父 td 的 100% 高度

Question

我通过在 td 中编写一个 table 创建了一个嵌套表。我希望 td 中的 table 应该占据父级 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

添加 height:100% 到表格。

table {
  width: 100%;
  height: 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>