Як визначити висоту таблиці таким чином, щоб з’явилася вертикальна смуга прокрутки?

На своїй сторінці у мене є таблиця з багатьма рядками. Я хотів би встановити висоту таблиці, скажімо, для 500px, так що якщо висота таблиці більша за цю, з'явиться вертикальна смуга прокрутки. Я намагався використовувати heightатрибут CSS на table, але це не працює.

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

Вам потрібно обернути таблицю всередині іншого елемента і встановити висоту цього елемента. Приклад з вбудованим css:

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

щоб встановити висоту таблиці, потрібно спочатку встановити властивість css "display: block", потім ви можете додати властивості "width / height". Я вважаю цю статтю Mozilla дуже гарним ресурсом для того, щоб навчитися стилювати таблиці: Посилання