Question

我有嵌套元素。我有一个指定高度的外部div。内表高度为100％。但是表内容溢出了外部div

 <div class="statistics">
    <table id ="statsTable">
      <tr>
        <th>Team1</th>
        <th>Team2</th>
        <th>Winner</th>
        <th>Win By run</th>
        <th>Win By Wicket</th>
      </tr>
      <tr *ngFor="let item of tableData">
        <td>{{item.team1}}</td>
        <td>{{item.team2}}</td>
        <td>{{item.winner}}</td>
        <td>{{item.win_by_runs}}</td>
        <td>{{item.win_by_wickets}}</td>
      </tr>
    </table>
  </div>

我的CSS-

    .statistics{
    height:400px;
    }
    #statsTable{
    color:white;
    height: 100%;
    }

我希望表格位于外部div指定的高度之内

Answer 1

您可以尝试在外部overflow:auto上添加div吗？这样一来，表格就可以留在里面，并在需要时滚动。

.statistics {
  height: 400px;
  border: 1px solid black;
  overflow: auto;
}

#statsTable {
  /*color:white;*/
  height: 100vh;
}

<div class="statistics">
  <table id="statsTable">
    <tr>
      <th>Team1</th>
      <th>Team2</th>
      <th>Winner</th>
      <th>Win By run</th>
      <th>Win By Wicket</th>
    </tr>
    <tr *ngFor="let item of tableData">
      <td>{{item.team1}}</td>
      <td>{{item.team2}}</td>
      <td>{{item.winner}}</td>
      <td>{{item.win_by_runs}}</td>
      <td>{{item.win_by_wickets}}</td>
    </tr>
  </table>
</div>

Answer 2

请参阅此代码笔https://codepen.io/rensmateyo/pen/oNvjJbQ，Overflow: auto;似乎可以正常使用

嵌套元素的高度问题

2 个答案: