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

Question

[niko83]

Имеется большая HTML таблица, которая не влазит в экран ни по горизонтали, ни по вертикали.

Нужно сделать так, чтобы при скроллировании вниз шапка таблицы всегда отображалась на странице.

(подобная функциональность реализована в MS Excel)



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



Можно ли тут обойтись одним СSS, или придёться подключать JS?

Answer 1

[Алексей]

Вот тут посмотрите.

Comments

[Michael Peteichuk]

она же не респонсив)

Answer 2

[shushu]

Вещь местами очень нужная, а все решения сводятся к фиксированному позицинированию и изменении параметров ( яваскриптом ) при скроллинге :(
жалко что в html 5 не добавили нативную поддержку :(

Answer 3

[Артем]

Раз никто не предлагает предложу свой вариант.
При прокрутке экрана, если координаты шапки относительно страницы уходят за экран, то отображать фиксированный «table», с позицией «left» как у шапки талицы, и «top» близким к 0. В эту таблицу нужно скопировать содержимое шапки, например через $('tr.head').clone();

Или использовать вот этот вариант, контейнер будет таблицей, а ее шапка «липким сайдбаром». Если таблица уйдет ха экран, шапка опустится до максимально возомжного положения, чтобы ее было видно.

Answer 4

[justhack]

заголовок легко, если абсолютно спозиционировать через position:absolute;top:0;left:0

Answer 5

[Seldon]

Sterhel — предложил неплохой вариант.
Что же касается вашего вопроса все сводится к дизайну, в каких-то случаях можно обойтись только css в каких-то нужен js, также важно знать какие браузеры надо поддерживать.

Answer 6

[Артем]

Зашел на habr чтобы найти ответ, а тут такое пишут, постеснялись бы.
Все же как сделать шапку как на yandex.ru (http://yandex.ru/yandsearch?text=sdasf&clid=9403&lr=2).

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

Answer 7

[MrMan]

для таблиц очень хорош плагин DataTables, и в частности FixedHeader www.datatables.net/release-datatables/extras/FixedHeader/index.html

Answer 8

[Александр Логинов-Солоницын]

Есть еще вот такой вариант - https://codepen.io/login2030/pen/dLRVLB
Это вариант без js, но он подойдёт не всем, так как использует position: sticky

Comments

[Александр Логинов-Солоницын]

Причём можно сделать как плавающую шапку, так и плавающие столбцы. Придётся конечно со стилями посидеть, но зато работать будет быстрее и плавнее, чем на скриптах.