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.
Читайте также:
- Как зарегистрировать аккаунт на Амазон и привязать банковскую карту. Пошаговая инструкция по регистрации на Amazon.com
- Сжатие PDF-файлов (документов) онлайн без потери качества, сжимаем pdf-файлы без программ
- Как сделать рестрим на Twitch, YouTube и GoodGame. Restream – обзор и настройка
- Сжатие изображений (картинок) без потери качества онлайн, сжимаем картинки jpeg, png без программ
- Как подключить DualShock 4 к компьютеру (ПК) на Windows через USB или Bluetooth
- Как установить видео обои на рабочий стол Windows 10. Wallpaper Engine – программа для видео картинки рабочего стола
- Windows 10 не видит жесткий диск (HDD) на персональном компьютере (ПК). Управление дисками на Windows 10
