Кто-нибудь смог реализовать прокручиваемую таблицу в HTML, где блокировки TOP и LEFT заморожены, но остальная часть таблицы прокручивается? Прекрасным примером этого является: Google Squared
Я попытался перепроектировать код для таблицы квадратов Google, но до сих пор я не увенчался успехом.
Примечание. Мне нужна возможность БЕСПЛАТИТЬ ТОП-РОУ и ЛЕВУЮ КОЛОНКУ одновременно.
Здесь есть рабочий пример http://ajaxian.com/archives/freeze-pane-functionality, который должен быть легко дублировать. Обязательно обратите внимание на комментарии - многие из пользователей внесли полезные предложения по улучшению script.
В запросе по запросу @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)
Установите фиксированный макет таблицы и укажите ширину столбца в пикселях явно. Вы должны иметь возможность добиться такого же эффекта.
У меня есть версия этого в использовании (для отображения стиля Gantt-chart).
он использует 3 таблицы: 1 для левого столбца (строки), 1 для верхнего (столбцы), а затем для данных.
вам нужно много работать, чтобы клетки соответствовали размерам с теми, с которыми они соответствуют (до
table layout-fixed может помочь в достижении этого).
Затем таблицы помещаются в некоторые div; левый и верхний divs имеют (как указано выше) высоту и ширину и overflow-auto в своих css.
Затем вы подключаете некоторый javascript для синхронизации прокрутки левых/верхних divs с внутренним...
Как я помню, была небольшая "проклятие и попытка", но это можно сделать с минимальными js.
HTH
Если вы используете jQuery, есть много плагинов для таблиц с фиксированной головой.
Вам нужно Scrollable (плагин jQuery)