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

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

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

Способов существует несколько, самым простым из которых является обертка таблицы в <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 не понимает.

Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.

Далее мы указали требуемую высоту основной части таблицы tbody. И назначили ей поведение overflow:auto, отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.

Результат здесь: Таблица 3.

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

Ссылки по теме

• Способ, на котором я основывался
• Вариант с фиксированной шириной и без поддержки Оперы
• Опять же фиксированная ширина + страшный исходник
• Этот работает не совсем хорошо