Когда нужно разместить длинную и широкую таблицу на одной странице, выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.
Первый вариант
Способов существует несколько, самым простым из которых является обертка таблицы в
div.scroll-table {
width: 90%;
overflow: auto;
height: 300px;
}
Выглядит это так: Таблица 1.
Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.
Второй вариант
Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).
Делается это так. Для начала составляем правильную структуру таблицы:
| Название позиции | Бренд | Стоимость |
|---|---|---|
| ... | ... | ... |
Подобная структура позволяет нам отделить зону заголовков от основного содержания таблицы. Я прописал класс fixed для элемента
Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:
.scroll-table tr.fixed {
position: relative;
top: expression(this.parentElement.parentElement.parentElement.scrollTop);
}
Кроме того, важно добавить правило position:relative к блоку scroll-table, чтобы заголовок таблицы не «вылез» наверх.
Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.
А теперь для Firefox
Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):
1. Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
2. Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Правила для Firefox выглядят так:
.scroll-table>table tbody {
height: 240px;
overflow: auto;
overflow-x: hidden;
}
Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.
Далее мы указали требуемую высоту основной части таблицы tbody. И назначили ей поведение overflow:auto, отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями. Результат здесь: Таблица 3.
Данный способ мне кажется наиболее простым и понятным.
Feininger
http://beholder-eye.info