Таблицы HTML / jQuery: прокрутка по горизонтали, исправление первого (левого) столбца - PullRequest
5 голосов
/ 11 августа 2011

У меня есть таблица, в которой отображается столбец с именами тестов, с несколькими (неограниченным числом) столбцами различных тестовых данных, связанных с тестами. Поскольку будет несколько наборов данных, я хочу ограничить количество видимых изображений и предоставить пользователю возможность прокрутки по горизонтали, чтобы показать / скрыть различные наборы данных.

Принятый ответ на Эффект скольжения столбца таблицы Jquery имеет тот вид эффекта скольжения, который я ищу, но как исправить самый левый столбец имен? Существует много данных, поэтому я не хочу клонировать две таблицы, как это было предложено в Интернете.

Создание одной фиксированной таблицы для имен и одной прокручиваемой таблицы для результатов данных было близко, но высота строки зависит от количества полученных данных (в ячейке может быть несколько строк текста), поэтому выравнивание получается скинул.

Кроме того, я не хочу использовать полосу прокрутки в Интернете по умолчанию. У меня есть изображения стрелок влево / вправо, которые я буду использовать для управления прокруткой, во многом как в примере, который я выложил выше.

Я потратил около 4 часов на поиски ответов на StackOverflow и в остальной части Интернета, но пока не нашел ничего подходящего ... любая помощь будет признательна, спасибо!

Редактировать: абсолютное позиционирование левого столбца приводит к тому, что остальная часть таблицы смещается влево под левым столбцом (скрывая первый столбец данных). Добавление «зеркального» столбца с тем же содержимым, что и в первом столбце, работает нормально; проблема заключается в том, что когда столбцы данных имеют ячейки, которые выше соответствующих ячеек имени, ячейка имени с абсолютным положением не может увидеть этот факт и изменить свой размер. Мысли? * * 1013

Ответы [ 2 ]

6 голосов
/ 11 августа 2011

Мне удалось сделать первый столбец фиксированным, под другим скользить, а второй столбец показать: http://jsfiddle.net/Skooljester/trFPD/1/ Сейчас я попробую поработать над другими частями вашего вопроса.

1 голос
/ 12 августа 2011

Понял что-то, что работает с таблицами , как я и просил. То, что я говорил ранее о создании одной фиксированной таблицы и одной прокручиваемой таблицы, работает с некоторыми изменениями:

Я сохранил исходную таблицу с именами тестов и данными и поместил ее в окно прокрутки. Затем я создал другую таблицу, в которой был только левый столбец, и поместил ее абсолютно поверх позиции по умолчанию левого столбца в таблице прокрутки. Затем я использую jQuery, чтобы изменить размеры ячеек одного столбца, чтобы они соответствовали переменной высоте ячеек данных (если ячейки имен выше, ячейки данных все еще получают эти данные из дублированного столбца).

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

Не публикуйте код, потому что я не хочу переписывать и форматировать пример, но если у вас есть вопросы о том, как это сделать, не стесняйтесь спрашивать. =)

...