Прокручиваемая таблица HTML с верхней строкой и левым столбцом

Question

Кто-нибудь смог реализовать прокручиваемую таблицу в HTML, где строки TOP и столбцы LEFT заморожены, но остальная часть таблицы прокручивается? Прекрасный пример этого: Google Squared

Я пытался выполнить обратный инжиниринг кода для таблицы в квадрате Google, но пока мне это не удалось.

Примечание: мне нужна возможность заморозить верхнюю строку и левую колонку одновременно.

Answer 1

Есть рабочий пример на http://ajaxian.com/archives/freeze-pane-functionality, который должно быть легко скопировать. Обязательно обратите внимание на комментарии - многие пользователи внесли полезные предложения по улучшению скрипта.

По запросу @ Nirk прямая ссылка на активную демо-версию: http://www.disconova.com/open_source/files/freezepanes.htm.

Answer 2

Перейти с базовой структурой, как это-

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)

Установить фиксированный макет таблицы и явно указать ширину столбца в пикселях. Вы должны быть в состоянии достичь того же эффекта.

Answer 3

у меня есть используемая версия (для отображения в стиле диаграммы Ганта).

он использует 3 таблицы: 1 для левого столбца (строки), 1 для верхнего (столбцы), а затем данные.

вам нужно усердно работать, чтобы ячейки соответствовали размерам с теми, до которых они соответствовали ( table layout-fixed может помочь добиться этого).

Затем таблицы помещаются в несколько элементов div; левый и верхний делители имеют (как предложено выше) высоту и ширину и overflow-auto в их CSS.

Затем вы подключаете некоторый javascript для синхронизации прокрутки левого / верхнего делителей с внутренним ...

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

НТН

Answer 4

Вам нужно Прокручиваемый (плагин jQuery)

Демо здесь

Answer 5

Если вы используете jQuery, есть много плагинов для таблиц с фиксированной головой.