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

Question

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

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

由于您只想要垂直滚动，请尝试以下操作：

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

---

编辑：

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

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

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

原文由 AgentConundrum 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要将表格包裹在另一个元素中并设置该元素的高度。内联 css 示例：

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

原文由 Dark Falcon 发布，翻译遵循 CC BY-SA 2.5 许可协议