Июль

Таблица с фиксированной шапкой на HTML при помощи CSS при скроллинге страницы

HTML таблица с фиксированной шапкой

Согласитесь, таблицы с большим количеством строк тяжело читать и разбирать. Куда удобнее их просматривать, когда шапка с наименования столбцов фиксируется при скролле.

При помощи position: sticky можно зафиксировать шапку таблицы (или блок) при скролле странницы.

Данное позиционирование схоже с position: fixed. Различие лишь в том, что position: sticky фиксирует элемент в пределах своего родителя.

Чтобы зафиксировать шапку таблицы при скроллинге, задайте тегам <th> позиционирование sticky и отступ сверху при помощи 20px.

ДЕМО

table .th{
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 20px;
}

Отступ необходим, если у вас, к примеру, также на сайте есть фиксированная шапка с навигацией, которую также можно зафиксировать при помощи position:sticky.

Читайте также: