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

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

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

Примечание. Мне нужна возможность БЕСПЛАТИТЬ ТОП-РОУ и ЛЕВУЮ КОЛОНКУ одновременно.

Ответы

Ответ 1

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

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

Ответ 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)

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

Ответ 3

У меня есть версия этого в использовании (для отображения стиля Gantt-chart).

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

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

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

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

Как я помню, была небольшая "проклятие и попытка", но это можно сделать с минимальными js.

HTH

Ответ 4

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