Фиксированная шапка для таблицы при скроллировании (CSS)

Имеется большая HTML таблица, которая не влазит в экран ни по горизонтали, ни по вертикали.
Нужно сделать так, чтобы при скроллировании вниз шапка таблицы всегда отображалась на странице.
(подобная функциональность реализована в MS Excel)

В идеале нужно сделать так же для первого столбца, который бы оставался на странице при скроллировании вправо.

Можно ли тут обойтись одним СSS, или придёться подключать JS?
  • Вопрос задан
  • 40675 просмотров
Пригласить эксперта
Ответы на вопрос 8
shushu
@shushu
Вещь местами очень нужная, а все решения сводятся к фиксированному позицинированию и изменении параметров ( яваскриптом ) при скроллинге :(
жалко что в html 5 не добавили нативную поддержку :(
Ответ написан
Artemeey
@Artemeey
Раз никто не предлагает предложу свой вариант.
При прокрутке экрана, если координаты шапки относительно страницы уходят за экран, то отображать фиксированный «table», с позицией «left» как у шапки талицы, и «top» близким к 0. В эту таблицу нужно скопировать содержимое шапки, например через $('tr.head').clone();

Или использовать вот этот вариант, контейнер будет таблицей, а ее шапка «липким сайдбаром». Если таблица уйдет ха экран, шапка опустится до максимально возомжного положения, чтобы ее было видно.
Ответ написан
justhack
@justhack
заголовок легко, если абсолютно спозиционировать через position:absolute;top:0;left:0
Ответ написан
Seldon
@Seldon
Sterhel — предложил неплохой вариант.
Что же касается вашего вопроса все сводится к дизайну, в каких-то случаях можно обойтись только css в каких-то нужен js, также важно знать какие браузеры надо поддерживать.
Ответ написан
Artemeey
@Artemeey
Зашел на habr чтобы найти ответ, а тут такое пишут, постеснялись бы.
Все же как сделать шапку как на yandex.ru (http://yandex.ru/yandsearch?text=sdasf&clid=9403&lr=2).

Вот по такой технологии и первый столбец можно было бы зафиксить, а все эти css приемчики описанные выше совсем не подходят и мешают пролистыванию страницы и совсем не удобны в шаблонах.
Ответ написан
kasheibess
@kasheibess
веб уже не тот
Есть еще вот такой вариант - https://codepen.io/login2030/pen/dLRVLB
Это вариант без js, но он подойдёт не всем, так как использует position: sticky
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы