css - 如何指定表格的高度以便出现垂直滚动条？

Question

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

Answer 1

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

因为你只想要垂直滚动，试试这个:

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

---

编辑:

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

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

请注意，这将导致元素具有 100% 的宽度，因此如果您不希望它占据包含元素的整个水平宽度，您还需要为该元素指定一个明确的宽度。