Липкая шапка таблицы на CSS
Практически на всех сайтах есть таблицы. А если эти таблицы имеют более дюжины строк, то вам, рано или поздно, понадобится сделать шапку таблицы «липкой». Многие до сих пор делают это с помощью JavaScript, но есть способ на чистом CSS.
Position Sticky Скопировать ссылку
thead
Как не выходить за рамки? Скопировать ссылку
К сожалению почти у всех таблиц, которые я встречаю, используется border-collapse: collapse . С этим свойством проще делать рамки для ячеек, но при этом сами рамки им уже не принадлежат, а как бы становятся частью самой таблицы. А это значит, что если шапка таблицы и стала липкой — рамки её ячеек всё равно прокручиваются вместе с таблицей.
Чтобы избавиться от этой проблемы, можно использовать border-collapse: separate . Да, с этим свойством рамки ячеек перестанут схлопываться, но нам это не помешает.
В некоторых дизайн-системах у ячеек есть только горизонтальные рамки, а значит достаточно просто указывать border-top или border-bottom . Но даже если вам нужно указать рамки со всех сторон, то есть много способов это сделать:
Рамки для конкретных сторон Скопировать ссылку
:root < --border-width: 2px; --border-color: #CED4DA; --border: var(--border-width) solid var(--border-color); >table < border-collapse: separate; border-spacing: 0; >thead < position: sticky; top: 0; >th, td < border-right: var(--border); border-bottom: var(--border); >th:first-child, td:first-child < border-left: var(--border); >thead tr:first-child th
Рамки как box-shadow Скопировать ссылку
table < border-collapse: separate; border-spacing: var(--border-width); >thead < position: sticky; top: var(--border-width); >th, td
В примере выше мы устанавливаем расстояние между ячейками с помощью border-spacing для таблицы и отступ для прилипания с помощью top для шапки, равный размеру рамки. А затем добавляем ячейкам тень box-shadow , имитирующую рамку.
Рамки как outline Скопировать ссылку
table < border-collapse: separate; border-spacing: var(--border-width); >thead < position: sticky; top: var(--border-width); >th, td
В примере выше мы повторяем трюк из предыдущего примера, но имитирурем рамку с помощью outline .
Как зафиксировать шапку таблицы?
По клику на карточку откроется таблица. Эту таблицу можно скролить, но вместе с таблицей двигается и шапка таблицы. Как шапку зафиксировать?
вот структура таблицы
table-scroll оборачивает всю таблицу и скрывает лишнюю высоту добавляя скролл
- Вопрос задан более трёх лет назад
- 587 просмотров
Зафиксировать шапку таблицы от прокрутки
Здравствуйте! Здесь конечно нужен ваш код, а именно: HTML код самой таблицы, с необходимыми стилями(CSS). Пока я вам справедливый минус ставлю, как добавите код, уберу минус. Всего вам доброго!
1 окт 2017 в 19:48
@AlexandrKazakov здесь не нужен код, он у всех HTML-таблиц примерно одинаковый, автор указал что шапка в thead — этого достаточно, ну а CSS этому вопросу просто никак не поможет
2 окт 2017 в 13:24
@andreymal Здравствуйте! Уверены вы в правильности своих слов? Сейчас здесь один ответ с тремя плюсами, и вот, там, и HTML, и CSS. Хотя по вашему CSS не нужен совсем. Итак, если один единственный ответ содержит и HTML и CSS, и автор ответа не поленился это написать. Тогда, что мешает автору вопроса поступить также и написать свой код? andreymal не могу вам за комментарий минус поставить, но тогда скажу просто. Минус ставлю вам, я с вами не согласен. Всего вам andreymal доброго!
2 окт 2017 в 14:08
@AlexandrKazakov я нигде не говорил, что HTML и CSS не нужны в ответе. Они не нужны только в вопросе.
2 окт 2017 в 14:09
@AlexandrKazakov «что мешает автору вопроса поступить также и написать свой код?» — мешает отсутствие в этом какого-либо смысла. Если вы не знаете, как выглядит код таблиц, почитайте любой учебник по HTML и не минусуйте людей зазря 🙂
Html как закрепить шапку таблицы
HTML таблица с фиксированной шапкой
Согласитесь, таблицы с большим количеством строк тяжело читать и разбирать. Куда удобнее их просматривать, когда шапка с наименования столбцов фиксируется при скролле.
При помощи position: sticky можно зафиксировать шапку таблицы (или блок) при скролле странницы.
Данное позиционирование схоже с position: fixed. Различие лишь в том, что position: sticky фиксирует элемент в пределах своего родителя.
Чтобы зафиксировать шапку таблицы при скроллинге, задайте тегам позиционирование sticky и отступ сверху при помощи 20px.
table .th
Отступ необходим, если у вас, к примеру, также на сайте есть фиксированная шапка с навигацией, которую также можно зафиксировать при помощи 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