Установка высоты и прокрутки tbody в HTML и CSS

Быстрый ответ

Чтобы задать максимальную высоту tbody вместе с вертикальной прокруткой, используйте следующие стили:

tbody {
  display: block; 
  max-height: 400px; 
  overflow-y: scroll; 
}

Для того чтобы thead оставался видимым на верху страницы, надо его фиксировать:

thead {
  display: table;
  width: 100%;
  position: sticky; 
  top: 0;
}

Это общие рекомендации, детальнее про настройку можно узнать ниже.

Создание tbody с прокручиваемым overflow: пошаговое руководство

Рассмотрим более подробно настройку и функционирование данных свойств.

Равномерное распределение ширины ячеек

Установите table-layout: fixed для равномерного распределения ширины ячеек:

table {
  width: 100%;
  table-layout: fixed;
}

Задайте также ширину столбцов:

th, td {
  width: 200px;
}

Подробнее об этом расскажет наш спикер на видео

Фиксирование шапки таблицы: каким образом

Чтобы шапка таблицы не перемещалась с места, воспользуйтесь свойством position: sticky:

thead {
  position: sticky;
  top: 0;
}

Советуем согласовать фоновые цвета для thead и tbody, чтобы исключить визуальный дискомфорт при прокрутке.

Учет ширины полосы прокрутки

Настройте ширину столбцов thead с учетом ширины полосы прокрутки:

thead {
  display: table;
  width: calc(100% – 17px);
}

(17px – это приблизительная ширина полосы прокрутки, но значение может требовать корректировки.)

Использование CSS Grid, JavaScript и возможные перемены в CSS

Использование display: block для tbody может вызвать нарушение выравнивания, поэтому стоит рассмотреть альтернативы в виде CSS Grid или JavaScript. Также учитывайте overflow: overlay, что в будущем может стать основным механизмом прокрутки содержимого.

Визуализация

Работа с таблицами схожа с игрой в Тетрис: важно, чтобы каждая ячейка аккуратно заняла свое место в предназначенном для нее пространстве (для этого настраивайте display: block и height / max-height). Также необходимо следить за тем, чтобы строки не выходили за пределы таблицы, но при этом можно было их прокручивать (overflow-y: scroll).

Полезные материалы

1. CSS Overflow. Учебный материал от W3Schools о свойстве CSS overflow.
2. Свойство CSS Overflow | CSS-Tricks. Руководство от CSS-Tricks о практическом использовании CSS overflow.
3. max-height – CSS: Cascading Style Sheets | MDN. Справочник на MDN Web Docs о настройке max-height с overflow.
4. box-sizing – CSS: Cascading Style Sheets | MDN. Детальное описание свойства box-sizing.
5. HTML-таблица на всю ширину экрана с вертикальной прокруткой внутри tbody. Дискуссия на Stack Overflow о создании прокручиваемых таблиц с фиксированными заголовками.
6. Заголовок таблицы с прокручиваемым содержимым – пример с CodePen. Живой пример таблицы с фиксированным заголовком и прокручиваемым содержимым.