14
Июль

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

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

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

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

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

Я вместе с командой запустил сервисы для стримеров Twitch.tv:

  • Stream-Up.ru - бесплатное продвижение канала по зрителям и фолловерам.
  • Stream-Alert.ru - автопостинг о начале стрима ВК и Телеграм.

Заходите и пробуйте. Буду рад каждому :)

При помощи 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 при скроллинге страницы"