Держите одну колонку таблицы фиксированной при прокрутке по горизонтали, но также прокрутите по вертикали

Question

У меня есть большой стол внутри прокручиваемого div. В таблице содержится имя человека, а затем его данные. Мне нужно, чтобы первый столбец таблицы оставался фиксированным при прокрутке по горизонтали, так что имя человека остается видимым, когда смотришь на его детали. Аналогично этому: HTML table with horizontal scrolling (first column fixed)

Однако мой стол также очень большой в направлении y, поэтому, когда я прокручиваю вниз, имя человека также должно прокручиваться вместе с его деталями. This почти решает мою проблему, но не вертикальную прокрутку.

Пожалуйста, помогите!

Answer 1

Для вертикальной прокрутки проблема заключается в сохранении верхних и нижних колонтитулов. Лучший способ сделать это - фактически иметь три таблицы: один для заголовков, один для данных (в прокручиваемом DIV) и один для нижнего колонтитула. Если ширина столбцов таблицы является фиксированной, это все, что вам нужно сделать. Если это не так, вам нужно будет использовать JavaScript для их настройки. Но здесь есть трюк: таблица с шириной столбца АВТО не может быть гарантирована для использования ширины, заданной в JS, особенно если столбец пуст, или текстовый элемент заголовка довольно длинный.

Я обработал это, установив ширину заголовков на основе данных, установив, изменился ли браузер, а затем изменил ширину данных. Как только они закрываются, я устанавливаю таблицу в режим FIXED для окончательной настройки.

Посмотрите здесь:

http://hifi.goneill.co.nz/cd.php

Нажмите на джаз, классическая кнопки и т.д., чтобы увидеть таблицы. Также прочитайте страницу технических заметок, так как она описывает кодирование и попробуйте версию Ajax.

Для вашей фиксированной колонки вы можете сделать что-то подобное: иметь две таблицы и использовать offsetTop одного для установки scrollTop другого. Посмотрите, как моя таблица устанавливает верхнюю строку при сортировке столбца с пустыми строками или сохраняет и восстанавливает текущую строку в версии Ajax при обмене между вкладками.

Answer 2

Я пытался решить проблему с фиксированным столбцом, где таблица находится внутри другого элемента управления DIV. Решая это, я столкнулся с той же проблемой и нашел решение, установив контейнер в свойстве ScrollTop на событие «onscroll». Я применил ниже стиля к контейнеру:

.floatingStyle 
{ 
    position:relative; 
    background-color:#829DC0; 
    top:0px; 
} 

Вы можете посмотреть полное решение здесь: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html Есть несколько проблем, связанных с браузера, которые также обрабатываются там.