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

101

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

css css-tables

— Миша Морошко
источник

Может быть, использовать max-heightвместо того, чтобы heightв последнем случае высота стола была бы равной500px

— Фред

Вы можете задать второй вопрос о том, чтобы строка заголовка не прокручивалась. ;)

— Билл Бингэм

См. Также 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
источник

Однако это не ограничивает высоту.

— Фред

Нет, это так, вам просто нужно display:blockна столе, чтобы он вел себя как div jsfiddle.net/TSGSA/1

— Фред

@Fred: Великие умы думают одинаково. Я обновил свой ответ, пока вы комментировали. :)

— AgentConundrum

Этот ответ мне действительно помог, но вместо того, чтобы применять его к тегу таблицы, это нужно делать с телом, чтобы заголовок оставался статичным при прокрутке. Затем есть некоторые стили, чтобы разобраться в области в thead, которая находится над полосой прокрутки.

— Дэвид

Если вы собираетесь использовать это на tbody, убедитесь, что вы добавили display: block в thead (и, возможно, tfoot), иначе они могут немного сойти с ума. Проблема, похоже, в том, что, сделав это, вы разорвали связь между thead и tbody: столбцы первого не знают ширины второго. Так что вы исправляете это и спускаетесь по скользкой дорожке. «Я умер за красоту ...»

— Cuse70

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

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

— Темный сокол
источник

Это не позволит удерживать thead на месте во время прокрутки тела.

— Дэвид

Этого требования нет в исходном вопросе.

— Dark Falcon

Кроме того, другой (принятый) ответ также не удерживает внимание.

— Брок Адамс,

Вы по-прежнему можете сделать так, чтобы заголовок был на месте с помощью этого метода. Вы скрываете заголовок таблицы, а затем создаете вторую таблицу над первой таблицей, в которой есть заголовок. Затем стилизуйте обе таблицы, чтобы у display:table;них были их строки display:table-row;и их ячейки, display:table-cell;и две таблицы совпадут и будут выглядеть как одна. (ПРИМЕЧАНИЕ: это не работает с очень большими таблицами; в основном, оно сопоставляет их, когда может. Я использовал эту технику несколько раз.)

— levininja

Конечно. Чтобы использовать относительные размеры, необходимо указать размер родителя. Например: jsfiddle.net/hz8wy

— Dark Falcon

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

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