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

Question

I have an absolute positioned div, inside a table is positioned (centered). This table can have 5 rows or 15 rows or more. I would like my div (and the table/rows) to be displayed up to a maximum height of X. If that height is reached, the div should take this max height and the table/rows should show a scroll bar, to scroll the table inside the div.

How would i be able to achieve this ?

Answer 1

Using a combination of max-height on the container and overflow-y: auto on the table, it's fairly straightforward:

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

Answer 2

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