Прокручиваемая таблица HTML с верхней строкой и левым столбцом
Кто-нибудь был в состоянии реализовать прокручиваемую таблицу в HTML, где строки TOP и столбцы LEFT заморожены, но остальная часть таблицы прокручивается? Прекрасный пример этого: Google Squared
Я попытался выполнить обратный инжиниринг кода для таблицы Google в квадрате, но до сих пор мне не удалось.
Примечание: мне нужна возможность заморозить верхний ряд и левую колонку одновременно.
5 ответов
На http://ajaxian.com/archives/freeze-pane-functionality есть рабочий пример, который легко можно скопировать. Обязательно обратите внимание на комментарии - многие пользователи внесли полезные предложения по улучшению сценария.
По запросу @Nirk прямая ссылка на активную демоверсию находится по адресу http://www.disconova.com/open_source/files/freezepanes.htm.
Перейти с базовой структурой, как это-
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
Установите фиксированный макет таблицы и явно укажите ширину столбцов в пикселях. Вы должны быть в состоянии достичь того же эффекта.
У меня есть версия этого в использовании (для отображения стиля диаграммы Ганта).
он использует 3 таблицы: 1 для левого столбца (строки), 1 для верхнего (столбцы), а затем данные.
вам нужно усердно работать, чтобы ячейки соответствовали размерам с теми, к которым они соответствуют (table layout-fixed может помочь достичь этого).
Затем таблицы помещаются в несколько элементов div; левый и верхний делители имеют (как указано выше) высоту и ширину и overflow-auto в их css.
Затем вы подключаете некоторый javascript для синхронизации прокрутки левого / верхнего делителей с внутренним...
Насколько я помню, было довольно много "ругань-и-попробуй-снова", но это можно сделать с минимальным js.
НТН
Если вы используете jQuery, есть много плагинов для таблиц с фиксированной головой.