css зафиксировать шапку таблицы при прокрутке

Как работает position: sticky;

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.

Из минусов – не корректно работает на мобильных.

У таблицы добавляется только класс – fixtable .

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

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

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

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

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