html - Div调整到表格大小

Question

我有一个包含一些行的 html 表格，这个表格在一个 HTML div 中，我需要这个 div 总是有一个滚动条。

为了做到这一点，我在 div 的 css 中设置了这两个属性:height: 400px 和 overflow-y: scroll，然而，正如你可能知道，滚动只有在表格超过400px大小时才会出现。

有没有办法让 div 的尺寸总是比表格略小(例如，div 是表格尺寸的 90%)，或者任何其他方法让 div 总是有滚动条？

 #events_div{
   height:400px;
   overflow-y:scroll
 }

<div id="events_div">
    <table id="events_table">
        <thead>
            <th>...</th>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

   

Answer 1

您需要做的就是将 div 的 max-height 设置为小于 table 的投影高度。因此，如果 table 的高度约为 300px，请设置 div 的 max-height: 200px;

.theDiv {
  max-height: 200px;
  overflow-y: scroll;
  background: blue;
}
.theTable {
  height: 300px;
  background: black;
  color: white;
}

<div class="theDiv">
  
  <table class="theTable">
    
    <tr>
      <th>Hello</th>
    </tr>
    <tr>
      <td>Hello person</td>
    </tr>
    
  </table>
  
</div>

此外，如果您不知道表格的高度，请将 min-height 设置为大于 div 高度的值。