Таблица с прокруткой и фиксированным заголовком

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

Первый вариант

Способов существует несколько, самым простым из которых является обертка таблицы в <div> с указанием ширины (и/или высоты) и стиля: overflow:auto. Например так:

div.scroll-table {
width: 90%;
overflow: auto;
height: 300px;
}

Выглядит это так: Таблица 1.

Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.

Второй вариант

Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).

Делается это так. Для начала составляем правильную структуру таблицы:

<table>
<thead>
<tr class= "fixed">
<th>Название позиции</th>
<th>Бренд</th>
<th>Стоимость</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</tbody>
</table>

Подобная структура позволяет нам отделить зону заголовков от основного содержания таблицы. Я прописал класс fixed для элемента <tr>, так как IE 5 не понимает конструкцию .scroll-table thead tr, которой достаточно для IE 6.

Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:

.scroll-table tr.fixed {
position: relative;
top: expression(this.parentElement.parentElement.parentElement.scrollTop);
}

Кроме того, важно добавить правило position:relative к блоку scroll-table, чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т.е. с указанием верного DOCTYPE).

Таблица 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.

Данный способ мне кажется наиболее простым и понятным. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)

http://beholder-eye.info/

Рекомендуем почитать:
• Особенности ссылок «вверх страницы»
• Цвет и рисунок на кнопке
• Стильные курсоры