Таблица с прокруткой и фиксированным заголовком
Довольно часто возникает необходимость создания таблицы с вертикальной или горизонтальной прокруткой, но фиксированным заголовком.
Ниже предлагаю обзор различных решений подобной задачи:
1. 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
Не используются никакие скрытые таблицы, фреймы, однако для устранения проблем с последней колонкой в Firefox, используется специфический селектор. А для позиционирования футера таблицы в IE используется expression. Автор метода, Brett Merkey, также позаботился о написании стилей для печати такой таблицы.
3. Scrollable HTML table plugin for jQuery
Конечно же, среди огромного количества плагинов для jQuery нашёлся плагин и для скролинга таблицы. Так что, если Вы уже используете этот фреймворк в Вашем проекте, то использовать дополнительные скрипты нет необходимости. Плагин также позволяет фиксировать позицию футера таблицы.
4. Lock or Freeze Table Columns plus Non-Scroll Headers
Решение для фиксированного первого столбца при горизонтальной прокрутке - работает для Internet Explorer 5.0+. Страница очень легковесная, а потому это решение, хоть и далеко не кроссбраузерное, зато может применяться, например, для интранетов. Автор - уже упомянут выше, Brett Merkey.
