Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

Таблица с фиксированной левой колонкой

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

Не нашел ничего путного готового, в итоге предлагаю как заготовку следующий вариан, может, кому-то пригодится:

Демо таблица с фиксированной левой колонкой

 

Вся суть там в позиционировании, сам же яваскрипт занимает всего несколько строк. Общая идея такая:

  • у нас есть общий контейнер фиксированной ширины, который ограничивает видимый размер таблицы; вся работа осуществляется внутри него;
  • создаем клон оригинальной таблицы, помещаем ее в блок с overflow:hidden и scroll-x:auto, ширина которого меньше ширины общего контейнера на ширину первой колонки; смещаем клон таблицы влево так, чтобы первая колонка клона ушла за его границу;
  • позиционируем контейнер с клоном поверх основной таблицы так, чтобы визуально он наложился на основную без искажений

 

все.

 

Ограничения.

  • При клонировании теряются все события, поэтому если таблица напичкана интерактивностью, события придется добавлять заново.
  • Я не задавлся целью стилизовать прокрутку и с этим, скорее всего, придется повозиться.
  • ИЕ6 и ИЕ7 идут лесом.

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

Заготовка для галереи изображений с прокруткой. Не знаю, когда дойдут руки довести ее до вида плагина, поэтому открываю как есть. Можно доработать.

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления