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

101

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

css css-tables Миша Морошко
источник
1
Может быть, использовать max-heightвместо того, чтобы heightв последнем случае высота стола была бы равной500px
Фред
1
Вы можете задать второй вопрос о том, чтобы строка заголовка не прокручивалась. ;)
Билл Бингэм
См. Также stackoverflow.com/questions/1587927/…
Alex Nolasco

Ответы:

173

Попробуйте использовать 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%, поэтому, если вы не хотите, чтобы он занимал всю горизонтальную ширину страницы, вам также необходимо указать явную ширину для элемента.

AgentConundrum
источник
3
Однако это не ограничивает высоту.
Фред
6
Нет, это так, вам просто нужно display:blockна столе, чтобы он вел себя как div jsfiddle.net/TSGSA/1
Фред
2
@Fred: Великие умы думают одинаково. Я обновил свой ответ, пока вы комментировали. :)
AgentConundrum
1
Этот ответ мне действительно помог, но вместо того, чтобы применять его к тегу таблицы, это нужно делать с телом, чтобы заголовок оставался статичным при прокрутке. Затем есть некоторые стили, чтобы разобраться в области в thead, которая находится над полосой прокрутки.
Дэвид
7
Если вы собираетесь использовать это на tbody, убедитесь, что вы добавили display: block в thead (и, возможно, tfoot), иначе они могут немного сойти с ума. Проблема, похоже, в том, что, сделав это, вы разорвали связь между thead и tbody: столбцы первого не знают ширины второго. Так что вы исправляете это и спускаетесь по скользкой дорожке. «Я умер за красоту ...»
Cuse70
59

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

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
Темный сокол
источник
9
Это не позволит удерживать thead на месте во время прокрутки тела.
Дэвид
22
Этого требования нет в исходном вопросе.
Dark Falcon
2
Кроме того, другой (принятый) ответ также не удерживает внимание.
Брок Адамс,
Вы по-прежнему можете сделать так, чтобы заголовок был на месте с помощью этого метода. Вы скрываете заголовок таблицы, а затем создаете вторую таблицу над первой таблицей, в которой есть заголовок. Затем стилизуйте обе таблицы, чтобы у display:table;них были их строки display:table-row;и их ячейки, display:table-cell;и две таблицы совпадут и будут выглядеть как одна. (ПРИМЕЧАНИЕ: это не работает с очень большими таблицами; в основном, оно сопоставляет их, когда может. Я использовал эту технику несколько раз.)
levininja
1
Конечно. Чтобы использовать относительные размеры, необходимо указать размер родителя. Например: jsfiddle.net/hz8wy
Dark Falcon
1

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

крупеш Анадкат
источник