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

时间:2018-04-10 13:36:22

标签: html css html-table

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

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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;

答案 2 :(得分:0)

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