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

перейти к комментариям


Таблица с прокруткой

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

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

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

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

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


Комментарии RSS для комментариев

  1. # Dm 4485 дн. назад:

    Удобно. Особенно пример понравился.

    >Обычно с этим браузером проблем гораздо меньше, чем с IE
    Фраза порадовала – не один я так считаю.

  2. # @leX — 4485 дн. назад:

    Не в одном из примеров не работает фиксация заголовков таблицы в Opere 9

  3. # Spr!tE 4485 дн. назад:

    @leX: про Оперу никто и не говорил =)
    Я сам был бы рад найти простой способ, работающий в Опере, но мне такой к сожалению не встречался…
    Все они используют фиксированную ширину таблицы, да еще и принудительное указание ширин ячеек.

  4. # @FICUS@ — 4325 дн. назад:

    Спасибо.
    У меня пример первый работает нормально.
    Браузеры:
    IE 6;
    Opera 9;
    SeaMonkey 1.0.5; (mazilla).

    остальные примеры не испытывал за ненадобностью.

    Спасибо. Хороший сайтик.

  5. # Max 4088 дн. назад:

    Спасибо, как раз искал такую возможность, но не знал как реализовать и вот ваш сайт! Будем изучать дальше...

Что вы об этом думаете?


Редизайн «Юниаструм банка» Клиент всегда прав?