Обзоры, статьи, исследования



Таблица с прокруткой и фиксированным заголовком


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

Ниже предлагаю обзор различных решений подобной задачи:
1. Pure CSS Scrollable Table with Fixed Header

Pure CSS Scrollable Table with Fixed Header

Фиксируется позиция заговков с помощью задания CSS-свойств для THEAD, прокрутка реализована за счёт TBODY и использования небольшого JavaScript.

базовая версия, включает поддержку:
Opera 7.x + (все платформы)
Mozilla 1.x + (все платформы)
IE 6.x + (Windows)
Safari 1.x + (MacOS)
Konqueror 3.x
версия с поддержкой большего количества браузеров.

2. Scrollable Table with Fixed Header, repeat print header and footer

Scrollable Table with Fixed Header, repeat print header and footer

Не используются никакие скрытые таблицы, фреймы, однако для устранения проблем с последней колонкой в Firefox, используется специфический селектор. А для позиционирования футера таблицы в IE используется expression. Автор метода, Brett Merkey, также позаботился о написании стилей для печати такой таблицы.

3. Scrollable HTML table plugin for jQuery

Scrollable HTML table plugin for jQuery

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

4. Lock or Freeze Table Columns plus Non-Scroll Headers

Решение для фиксированного первого столбца при горизонтальной прокрутке - работает для Internet Explorer 5.0+. Страница очень легковесная, а потому это решение, хоть и далеко не кроссбраузерное, зато может применяться, например, для интранетов. Автор - уже упомянут выше, Brett Merkey.