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

Posted 2021-05-04

我通过在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>

答案

将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>

另一答案

这样做：

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

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

table table{
 height: 100%;
}

DEMO HERE

另一答案

出于某些奇怪的原因，将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>

以上是关于嵌套表不占用父td的100％高度的主要内容，如果未能解决你的问题，请参考以下文章

增加包含浮动嵌套 div 的父 div 的高度

共享元素转换在父片段和子片段之间不起作用（嵌套片段）

强制嵌套 div 的最小高度为 100%？

将数据从嵌套片段发送到父片段

以编程方式嵌套的片段不反映导航上的父生命周期

当 listview 行项目中包含隐藏视图时，片段不尊重匹配父高度