如何指定表格的高度,以便显示垂直滚动条？

Question

我的页面上有很多行的表格.我想设置表的高度,例如500px,这样如果表的高度大于那个,就会出现一个垂直滚动条.我尝试使用CSS height属性table,但它不起作用.

Answer 1

尝试使用overflowCSS属性.还有单独的属性来定义仅水平溢出(overflow-x)和垂直溢出(overflow-y)的行为.

由于您只想要垂直滚动,请尝试以下方法:

table {
  height: 500px;
  overflow-y: scroll;
}

编辑:

显然<table>元素不尊重overflow财产.这似乎是因为默认情况下<table>元素不会呈现display: block(它们实际上有自己的显示类型).您可以overflow通过将<table>元素设置为块类型来强制属性工作:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

请注意,这将导致元素具有100%的宽度,因此如果您不希望它占据页面的整个水平宽度,则还需要为元素指定显式宽度.

Answer 2

您需要将表包装在另一个元素中并设置该元素的高度.内联css示例:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

Answer 3

这些解决方案都不起作用。然而，我抓住了 Bootstrap 的 Flex 解决方案，它起作用了

table, td {
  border: 1px solid black;
}
th {
  border-left: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 400px;
    
}

thead {
    padding-right: 13px;
    flex: 0 0 auto;
}

tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}

<table>
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
  </tbody>
</table>