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

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

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

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

 

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

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

 

все.

 

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

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