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

【问题标题】：How to specify table's height such that a vertical scroll bar appears?如何指定表格的高度以显示垂直滚动条？
【发布时间】：2010-12-16 03:52:00
【问题描述】：

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

【问题讨论】：

也许使用max-height 而不仅仅是height，因为后者会强制表格的高度为500px
您可能想问第二个问题，关于保持标题行不滚动。 ;)
另见stackoverflow.com/questions/1587927/…

标签： css css-tables

【解决方案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% 的宽度，因此如果您不希望它占据页面的整个水平宽度，您还需要为元素指定一个显式宽度。

【讨论】：

这并不限制高度。
@Fred：我认为这是暗示的，但你是对的。我在示例中添加了一个明确的 height 属性。
不，确实如此，您只需要将display:block 放在桌子上，使其表现得像div jsfiddle.net/TSGSA/1
这个答案确实对我有帮助，但不是将它应用到 table 标签，而是应该对 tbody 完成，以允许标题在滚动时保持静态。然后有一些关于滚动条上方区域的样式需要整理。
如果您要在 tbody 上使用它，请确保将 display:block 添加到 thead（可能还有 tfoot），否则它们可能会有点疯狂。问题似乎在于，一旦你这样做了，你就破坏了 thead 和 tbody 之间的联系：前者的列不知道后者的宽度。所以你修补它，然后沿着滑坡走。 “我为美丽而死……”

【解决方案2】：

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

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

【讨论】：

这将不允许在 tbody 滚动时将头保持在原位。
原问题中没有这个要求。
另外，另一个（已接受的）答案也没有保持原位。
您仍然可以使用此方法使标题看起来到位。您隐藏表格的标题，然后在包含标题的第一个表格上方创建第二个表格。然后，将两个表的样式设置为display:table;，将它们的行设置为display:table-row;，将它们的单元格设置为display:table-cell;，这两个表将匹配并且看起来是一个。（注意：这不适用于非常大的表；基本上，它会尽可能匹配它们。我已经多次使用这种技术。）
当然。必须指定父级的大小以使用相对大小。例如：jsfiddle.net/hz8wy

【解决方案3】：

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

此外，标题中的每个 th 单元格和正文中的每个 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】：

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

【讨论】：