javascript - div 内的可滚动表格，div 的最大高度有限？

Question

我有一个绝对定位的 div，在一个表内定位(居中)。该表可以有 5 行或 15 行或更多。我希望我的 div(和表格/行)显示的最大高度为 X。如果达到该高度，div 应采用此最大高度并且表格/行应显示滚动条，以滚动div 内的表格。

我怎样才能做到这一点？

Answer 1

在容器上使用 max-height 和在 table 上使用 overflow-y: auto 的组合，这非常简单:

.special-table {
  border: 1px solid black;
  max-height: 100px;
  overflow-y: auto;
}

.special-table table {
  border: 1px solid gray;
  margin: 0 auto; /* centers the table */
}

<h1>When Everything Fits</h1>
<div class="special-table">
  <table>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
  </table>
</div>

<h1>When the Table Overflows</h1>
<div class="special-table">
  <table>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
    <tr><th>Foo</th><td>Bar</td></tr>
  </table>
</div>