Фиксированная шапка для таблицы при скроллировании (CSS)?
Имеется большая HTML таблица, которая не влазит в экран ни по горизонтали, ни по вертикали.
Нужно сделать так, чтобы при скроллировании вниз шапка таблицы всегда отображалась на странице.
(подобная функциональность реализована в MS Excel)
В идеале нужно сделать так же для первого столбца, который бы оставался на странице при скроллировании вправо.
Можно ли тут обойтись одним СSS, или придёться подключать JS?
- Вопрос задан более трёх лет назад
- 44200 просмотров
- Вконтакте
- Вконтакте
- Вконтакте
Раз никто не предлагает предложу свой вариант.
При прокрутке экрана, если координаты шапки относительно страницы уходят за экран, то отображать фиксированный «table», с позицией «left» как у шапки талицы, и «top» близким к 0. В эту таблицу нужно скопировать содержимое шапки, например через $(‘tr.head’).clone();
Или использовать вот этот вариант, контейнер будет таблицей, а ее шапка «липким сайдбаром». Если таблица уйдет ха экран, шапка опустится до максимально возомжного положения, чтобы ее было видно.
Фиксированный заголовок таблицы HTML
Таблицы довольно часто используются для отображения некоторой статистической информации и не только. Наличие большого количества строк в таблице наводит на здравую идею — фиксацию заголовка таблицы для удобного восприятия данных из неё. Для реализации этой затеи одной стандартной таблицей, к сожалению, не обойтись, однако в этом нет ничего страшного, и в нашем примере мы рассмотрим решение этой проблемы посредством использования двух разных таблиц.
Наверное, вы уже догадались, что первая таблица будет использоваться для отображения именно фиксированной части заголовка. Вторая – будет отображать само содержимое таблиц. Для разделения таблиц так же будут использованы блоки div, и для задания одинаковых размеров для ячеек таблиц будут использованы общие атрибуты в CSS. Для второй таблицы будет доступен скроллинг, таким образом, она будет скролиться по отношению к первой таблице.
HTML разметка таблицы
Для наглядного примера мы сделали таблицу довольно содержательной, теперь код CSS стилей.
CSS стили таблицы
Так же для правильного отображения таблицы при ресайзинге мы воспользуемся простым Javascript-кодом:
Наглядный пример того что получилось вы можете просмотреть на демо-странице ссылка которой будет ниже. Если это показалось вам сложным решением, то не стоит раньше времени расстраиваться, попробуйте реализовать это дело самим, и вы поймете, что нет ничего сложного. Касательно темы таблиц так же рекомендую к прочтению статью о сортируемых таблицах Data Tables.
Демо | Скачать в архиве
Прилипающий блок CSS
Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.