Question

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

我怎样才能实现这个目标？

Answer 1

在容器上使用max-height和桌面上overflow-y: auto的组合，它非常简单：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 2

tbl{
  height: 100px;
  overflow: scroll;
  position: absolute;
}

div中的可滚动表格，div的最大高度有限？

2 个答案: