Как указать высоту таблицы, чтобы появилась вертикальная полоса прокрутки?

У меня есть таблица со многими строками на моей странице. Я хотел бы установить высоту стола, например, 500px, так что если высота таблицы больше, чем вертикальная полоса прокрутки. Я попытался использовать атрибут CSS height на table, но он не работает.

Ответы

Ответ 1

Попробуйте использовать свойство CSS overflow. Существуют также отдельные свойства для определения поведения только горизонтального переполнения (overflow-x) и вертикального переполнения (overflow-y).

Поскольку вы хотите только вертикальную прокрутку, попробуйте следующее:

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

EDIT:

По-видимому, элементы <table> не соответствуют свойству overflow. Это связано с тем, что по умолчанию элементы <table> не отображаются как display: block (у них есть собственный тип отображения). Вы можете заставить свойство overflow работать, установив для элемента <table> тип блока:

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

Обратите внимание, что это приведет к тому, что элемент будет иметь ширину 100%, поэтому, если вы не хотите, чтобы он занимал всю горизонтальную ширину страницы, вам также нужно указать явную ширину для этого элемента.

Ответ 2

Вам нужно обернуть таблицу внутри другого элемента и установить высоту этого элемента. Пример с встроенным css:

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