HTML-таблица с замороженным левым столбцом, с возможностью прокрутки по вертикали?

Question

Я видел примеры здесь и там хитрости, чтобы использовать

position:absolute

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

Это работает, как видно здесь: http://jsfiddle.net/YMvk9/4289/

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

Мне нужна замороженная колонка слева для вертикальной прокрутки. Кто-нибудь может исправить код jsfiddle?

Answer 1

Предполагая, что вы хотите, чтобы пользователь мог прокручивать таблицу по вертикали или по горизонтали, есть несколько способов добиться этого. Самым простым было бы поставить headcol ячейки в таблице, которые там есть, затем расположите две таблицы так, чтобы они были друг против друга, и оберните их в элемент div overflow:scroll, Я все же придумал исправление для вашего текущего макета.

Вот скрипка

У вас было несколько проблем:

1. Ваш overflow свойство относилось только ко второму столбцу таблицы.
2. Ваш содержащий div не содержит ничего, потому что у него не было правил позиционирования, поэтому я дал ему абсолютное позиционирование и назначил overflow:scroll: свойство к этому.
3. Как только вы поместите контейнер абсолютно, он long класс, поэтому я назначил это float:right; и дал ему margin-left для учета headcol клетки.
4. Наконец, поскольку вы перемещаете элемент, вы должны использовать "clear fix", чтобы убедиться, что он не переносится, поэтому я добавил новый класс и новую ячейку в каждую строку, чтобы исправить макет.

Надеюсь, это поможет!

ОБНОВЛЕНИЕ: После публикации я заметил одну проблему в этом добавлении margin-left на ваш long класс облажался, как таблица выглядит, я удалил это правило и добавил padding-left к div чтобы исправить проблему. Возможно, вам еще понадобится несколько небольших настроек полей и отступов, чтобы таблица выглядела правильно; но это работает! Я тоже обновил скрипку.