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

问题描述

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

I have a table with many rows on my page. I would like to set table's height, say for 500px, such that if the height of the table is bigger than that, a vertical scroll bar will appear. I tried to use CSS height attribute on the table, but it doesn't work.

推荐答案

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

Try using the overflow CSS property. There are also separate properties to define the behaviour of just horizontal overflow (overflow-x) and vertical overflow (overflow-y).

由于您只需要垂直滚动，请尝试：

Since you only want the vertical scroll, try this:

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

---

显然，< table> 元素不支持溢出属性。这似乎是因为< table> 元素在默认情况下不会呈现为 display：block 自己的显示类型）。您可以通过将< table> 元素设置为块类型来强制 overflow 属性工作：

Apparently <table> elements don't respect the overflow property. This appears to be because <table> elements are not rendered as display: block by default (they actually have their own display type). You can force the overflow property to work by setting the <table> element to be a block type:

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

请注意，这将导致元素的宽度为100％不希望它占据页面的整个水平宽度，您还需要为元素指定显式宽度。

Note that this will cause the element to have 100% width, so if you don't want it to take up the entire horizontal width of the page, you need to specify an explicit width for the element as well.

这篇关于如何指定表的高度，以便出现垂直滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！