Question

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

Answer 1

尝试使用overflow CSS属性。还有单独的属性来定义仅水平溢出（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

要设置表格的高度，需要首先设置css属性“ display：block” 然后您可以添加“宽度/高度”属性。我发现此Mozilla文章是学习如何设置表格样式的很好资源： Link

Answer 4

这个 CSS 还显示了一个固定高度的 HTML 表格。它将 HTML tbody 的高度设置为 400 像素，当它变大时 HTML tbody 会滚动，将 HTML 顶部保留为非滚动元素。

此外，标题中的每个单元格和正文中的每个 td 单元格都应设置为所需的固定宽度。

#the-table {
  display: block;
  background: white; /* optional */
}

#the-table thead {
  text-align: left; /* optional */
}

#the-table tbody {
  display: block;
  max-height: 400px;
  overflow-y: scroll;
}

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

4 个答案: