14
Июль

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

Категория: Про Сайты
Теги: ,

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

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

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

При помощи 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.

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

Мой паблик в Вконтакте :)

Похожие записи:
Комментарии к записи "Таблица с фиксированной шапкой на HTML при помощи CSS при скроллинге страницы"
  • Mars

    Чувак, это лучшее решение за последние тысячу лет!
    Я целый день искал способ зафиксировать шапку таблицы. В интернетах одни библиотеки для этой задачи.

    Спасибо =)

  • Artem

    Парень, ты гений!!!! Эта новая фитча в css просто бомба! Заменяет тысячу глючных строк кода! Спасибо тебе большое!

Оставить комментарий

Я не спам! (обязательно)

Подписаться, не комментируя