Как создавать прокручиваемые таблицы с помощью CSS и фиксированными заголовками

В веб-разработке часто необходимо создавать таблицы с большими объемами данных, которые требуют прокрутки. Однако сохранение фиксированного заголовка при прокрутке тела таблицы может оказаться сложной задачей. Вот как можно добиться этого эффекта:

Структура HTML

Во-первых, мы должны убедиться, что наша структура HTML правильна. У нас есть внешний элемент div с полосой прокрутки, внутренний элемент div, содержащий таблицу, заголовки таблиц должны находиться внутри элемента , а данные таблицы — в элементе

 
Стили CSS
Теперь нам нужно стилизовать таблицу с помощью CSS:
/* Separate header from body and allow both to scroll independently */
table tbody, table thead {
  display: block;
}

/* Enable scrolling for the table body */
table tbody {
  overflow: auto;
  height: 100px;
}

/* Fix the width of the header */
th {
  width: 72px;
}

/* Fix the width of the data cells */
td {
  width: 72px;
}
Дополнительные рекомендации
Убедитесь, что все ячейки заголовков и данных включены в элементы 
 для правильного выравнивания. Если вам нужна разная ширина столбцов, используйте селектор nth-child в CSS.
Примечание: Этот подход подходит для небольших таблиц. Для очень больших таблиц рассмотрите возможность использования другого метода, например виртуализации или сторонней библиотеки.