Прокрутка tbody независимо от thead?

Question

[Никита Траторов]

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


Тема горячо обсуждается и по сей день. Мне удалось найти максимально простой и рабочий вариант без JS, но и он оказался рабочим только до тех пор, пока высота таблицы была фиксирована. Как только tbody {height: 100%;}, вся «фишка» пропадает.

Задачка для знатоков: jsfiddle.net/BxWyA
измените tbody {height: на 100%}; и попробуйте добиться первоначального эффекта.


Конечно хочется без JS. Но если у Вас на примете есть простое решение c JS, то варианты будут уместны.

Заранее благодарю!

Comments

[Никита Траторов]

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

В данной верстке три фиксированные колонки таблицы, в первом столбце — структура БД, во втором — сплиттер (пока не рабочий), в третьем находится оберточный DIV для горизонтальной прокрутки, а в нем таблица, ради которой и задан мой вопрос.

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

Всем +1 за внимание.

[Никита Траторов]

Проблема заключается в том, что не удается сохранить горизонтальную прокрутку в пределах оберточного DIV и размеров ячейки таблицы-контейнера. А таблица всегда разного размера и без горизонтальной прокрутки не обойтись.

Answer 1

[Олег Матрозов]

Вариант с JS (проверял в: Chrome 26, IE 10, FF 3.6)
jsfiddle.net/npu9r/

Comments

[Олег Матрозов]

Вариант без JS (проверял в: Chrome 26, IE 10, IE 8, FF 3.6, Opera 10.6)
mear.me/test6/
Ограничения:

• Пример не пашет в jsfiddle (пришлось выложить себе на хост)
• Таблица становится блочным элементом со всеми вытекающими
• Необходимость жестко указывать высоту хеадера

[Никита Траторов]

Очень хороший пример без JS, Mear. У меня почти получилось его внедрить. И пришло понимание — а что, если действительно не «париться», и отдать JS синхронизацию ширины стобцов. Как тогда может выглядеть это решение?

[Олег Матрозов]

Немного поигравшись с вашим примером я пришел к выводу, что вертикальный и горизонтальный скоролл одновременно, штатными средствами, скорее всего не получится (вы ведь хотите наверняка, что бы вертикальный скролл еще и виден был бы всегда, не зависимо от позиции прокрутки горизонтального). Думаю тут правильнее было бы двигаться к искусственному скроллу который уже при помощи js будет двигать что куда надо. Но над этим примером тоже нужно посидеть.

[Никита Траторов]

Думаю, Mear, что Вы правы.
Коллеги, как считаете, чей вариант достоин отметки «Решение» (не для моего частного случая)?

Answer 2

[Stalker_RED]

Возможно я неправильно понял, что именно вы хотите получить, но закрепить заголовок при помощи position: fixed не вариант?
http://jsfiddle.net/hZajC/

Comments

[WebSpider]

Тогда не будет работать прокрутка самой таблицы внутри документа

[Никита Траторов]

Вариант хороший, но не подходит для случая с появлением горизонтальной прокрутки, о чем и написал WebSpider

Answer 3

[gribchic]

все решения не решения. поскольку заголовок таблицы во всех приведенных решениях оторван от тела таблицы, в результате чего ширины ячеек заголовка не совпадают с ширинами ячеек тела. убедиться в этом можно просто заменив во всех примерах строку скрипта:
var row = $("").html(a + " + " + b + " ="))
на:
var row = $("").html(a))

Comments

[Никита Траторов]

Спасибо, кэп. Кроме как копировать шапку - пока решений нет. Но это в любом случае не responsive-решение.

Answer 4

[Вячеслав Слинько]

Как можно прокручивать то, что полностью влезает на страницу?!
Обрамите таблицу любым блоком с ограничением по высоте и все заработает: jsfiddle.net/mynBk/

Comments

[Вячеслав Слинько]

Если вы хотите сделать таблицу на высоту экрана, то это делается так: jsfiddle.net/DGSxs/

[Олег Матрозов]

Ваш второй способ (на высоту экрана) не работает в IE 10

[Никита Траторов]

Второй способ KeepYourMind — это претензия на решение. Думаю в остальных случаях, кроме моего, он подойдет большинству. А проблему с IE10 можно решить отдельно.