Закрепление области html-таблицы

08.02.2015

Закрепление области в Excel используется для фиксации на листе  вертикальных и/или горизонтальных групп ячеек. Зафиксированные области ячеек не прокручиваются, что позволяет постоянно видеть информацию, размещенную в них. Например, зафиксировав в прайс-листе строку с названиями полей, нам не придётся каждый раз прокручивать прайс-лист наверх для определения того, что за данные находятся в том или ином столбце. Эта удобная функция может пригодиться и для фиксации областей html-таблиц, но, к сожалению, данная возможность не реализована в базовой функциональности html-таблиц. Поэтому приходится искать решение вопроса. К счастью, данную задачу можно решить при помощи 2-3 строк кода на javascript.

Как закрепить горизонтальную и вертикальную область html-таблицы? Для этого нужно использовать три слоя <div> и синхронизировать их прокрутку:

Задаём для всех слоёв id. Определяем размеры таблицы данных, и прописываем их  в стилях его слоя. Также включаем полосы прокрутки для этого слоя. Добавляем в тег слоя вызов события onscroll. В функции обработки этого события присваиваем слою с однострочной таблицей значение scrollLeft слоя данных, а слою с одноколоночной таблице значение scrollTop слоя данных. При помощи стилей убираем полосы прокрутки в слоях заголовков. После этого производим тонкую настройку слоев и таблиц.

Пример работы html-таблицы с закрепленными областями показан ниже.