Что делать, когда при прокрутке шапка таблицы выходит за пределы обзора

18.02.2009

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

Представьте, что вас интересует колонка W203.

Пропустим несколько строк.

...

...

...

...

...

Ну, где W203?

Решать проблему можно по-разному.

Low-end способ — каждые 15 строк повторять шапку. Недостаток — шапка не всегда сверху, и пользователю ее приходится искать.

Второй вариант — использовать свойство overflow блока-обертки. Недостаток — вторая дополнительная полоса прокрутки.

Самое интересное решение — шапка, которая при прокрутке страницы прилипает к верхней границе окна.

Раз.

Два.

Вот живой пример, где можно посмотреть детали реализации. У меня работает в Firefox 3 и Opera 9, а в IE 6 не работает.

Комментарии

Тормоз, 18.02.2009 15:22

Клёво сделано. Вот бы ещё без JS нечто подобное придумать. Но кроме overflow с полосой прокрутки ничего больше в голову не приходит, а такое решение сильно уступает показанному тобой примеру.

Дмитрий Сергеев, 18.02.2009 15:55

Привет.

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

Потом модно стало делать сабмит форм аяксом, а у меня была Opera 7 :) И я частенько пролетал, потому что graceful degradation мало кто обеспечивал. Пришлось браузер поменять.

Дальше оказалось, что Drupal идет с Jquery в базовой поставке.

У меня появился быстрый Интернет.

Сейчас вижу, что TinyMCE, например, не самая стабильная вещь. И если на сайте редактор стоит, то частенько у пользователей возникают проблемы. Но, в общем, со временем стал гораздо спокойнее относится к использованию JS. А уж в случае с шапкой таблицы опасностей совсем мало.

Тормоз, 18.02.2009 17:33

Здравствуй! Я обычно в комментах без вступительных слов, даже непривычно как-то :) Ты прав, это у меня какое-то HTML-cтарпёрство. Нехорошо, когда без JS вообще не работает что-то, а если просто будет меньше удобств, как в этом случае, так ничего страшного.

Дмитрий Сергеев, 19.02.2009 00:21

Да я тоже редко начинаю комментарии со слова «привет». Но иногда хочется, и не могу себе отказать :)

Сергей Протопопов, 18.02.2009 15:56

В "живом примере" всё сделано правильно и просто. Большая таблица разделена на несколько страниц )))

Андрей, 18.02.2009 16:33

А где можно второй вариант посмотреть?

Дмитрий Сергеев, 18.02.2009 16:37

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

Сергей Капустин, 18.02.2009 16:56

Вариант решения: http://www.diamondpriceguru.com/search-results/32161/ (на этой веб-службе мы сделали так, чтобы шапка оставалась всегда сверху)

Андрей, 18.02.2009 23:23

Что вы имеете ввиду под "шапка всегда вверху", кроме того, что она действительно вверху таблицы и уходит за экран при прокрутке? Я в разных браузерах смотрел -- разницы не заметил. А строк в таблице довольно много, есть шанс запутаться. Цветовое кодирование сильно помогает, конечно, но не настолько.
Короче, очень интересно узнать как оно вами задумывалось. Т.к. остальные штуки очень приятные на ощупь. :)

Сергей Капустин, 19.02.2009 05:29

Андрей, шапка (темно-голубой блок) должна быть всегда видна. При прокрутке она у Вас исчезает за пределы видимой области?

Андрей, 19.02.2009 07:44

Блок-то виден. Но вопрос ведь ставился несколько другой: не скрывать шапку именно таблицы, дабы облегчить пользователю употребление табличных данных в условиях большого количества строк. В вашем случае количество строк вполне изрядное и первая строка таблицы, в которой название столбцов, отправляется куда-то в небо, где её не видно. А хочется чтобы было видно.
Технологический приём я понял. Но мне он, в вашем случае, кажется, хоть и оправданным, всё же используемым не на 100%. В частности, расшифровку табличных данных туда можно было наверное и поместить. Строчек многовато всё же.

Сергей Капустин, 19.02.2009 08:27

Да, Андрей, я, действительно, привел пример не соответствующий напрямую теме публикации. Но в случае с DiamondPriceGuru.com нам, прежде всего, важно было, чтобы не двигался именно темно-голубой блок с подсказкой и кнопкой перехода на Starred Diamonds. Согласен с Вами, что к этому блоку можно присоединить шапку таблицы когда пользователь находится там, где ее не видно.

Проблема с невидимой шапкой таблицы становится еще более актуальной на таких страницах как эта http://www.diamondpriceguru.com/search-results/32161/6689927/

Дмитрий Зимин, 18.02.2009 23:34

Сергей, есть ли у тебя какой-нибудь персональный блог, кроме OpenConstructor? :) Я бы почитал.

Сергей Капустин, 19.02.2009 05:32

Полистайте мой фид http://friendfeed.com/sergey

puzik, 24.02.2009 19:31

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