Как указать высоту таблицы, чтобы появилась вертикальная полоса прокрутки? - PullRequest
96 голосов
/ 16 декабря 2010

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

Ответы [ 3 ]

153 голосов
/ 16 декабря 2010

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

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

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

РЕДАКТИРОВАТЬ:

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

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

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

56 голосов
/ 16 декабря 2010

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

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
2 голосов
/ 16 июля 2018

, чтобы установить высоту таблицы, вам нужно сначала установить свойство css "display: block", затем вы можете добавить свойства "width / height".Я нахожу эту статью Mozilla очень хорошим ресурсом, чтобы узнать, как стилизовать таблицы: Ссылка

...