Бывает, на сайте нужно выложить таблицу, в которой так много строк, что она не помещается на одном экране. И много столбцов с похожими значениями. А когда прокручиваешь страницу вниз, и шапка остается за пределами обзора, становится некомфортно.
Представьте, что вас интересует колонка W203.
Пропустим несколько строк.
...
...
...
...
...
Ну, где W203?
Решать проблему можно по-разному.
Low-end способ — каждые 15 строк повторять шапку. Недостаток — шапка не всегда сверху, и пользователю ее приходится искать.
Второй вариант — использовать свойство overflow блока-обертки. Недостаток — вторая дополнительная полоса прокрутки.
Самое интересное решение — шапка, которая при прокрутке страницы прилипает к верхней границе окна.
Раз.
Два.
Вот живой пример, где можно посмотреть детали реализации. У меня работает в Firefox 3 и Opera 9, а в IE 6 не работает.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
Тормоз, 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
могу предложить еще один выход. как обычно делают на интернет магазинах(на страницах сравнения характеристик) - повторяют шапку внизу таблиц. Плюс к тому же нужно помнить что пользователю часто не хочется смотреть всю таблицу, его интересуют главные параметры поэтому желательно в таких таблицах подавать только основную информацию(если конечно так можно).