Таблица с фиксированной левой колонкой
Однажды потребовалось сделать таблицы с возможностью горизонтальной прокрутки содержимого, но зафиксировать первую колонку, чтобы заголовки строк всегда были перед глазами.
Не нашел ничего путного готового, в итоге предлагаю как заготовку следующий вариан, может, кому-то пригодится:
Демо таблица с фиксированной левой колонкой
Вся суть там в позиционировании, сам же яваскрипт занимает всего несколько строк. Общая идея такая:
- у нас есть общий контейнер фиксированной ширины, который ограничивает видимый размер таблицы; вся работа осуществляется внутри него;
- создаем клон оригинальной таблицы, помещаем ее в блок с overflow:hidden и scroll-x:auto, ширина которого меньше ширины общего контейнера на ширину первой колонки; смещаем клон таблицы влево так, чтобы первая колонка клона ушла за его границу;
- позиционируем контейнер с клоном поверх основной таблицы так, чтобы визуально он наложился на основную без искажений
все.
Ограничения.
- При клонировании теряются все события, поэтому если таблица напичкана интерактивностью, события придется добавлять заново.
- Я не задавлся целью стилизовать прокрутку и с этим, скорее всего, придется повозиться.
- ИЕ6 и ИЕ7 идут лесом.