Фиксированная шапка для таблицы html

Очень удобно для длинных таблиц-портянок на html делать фиксированную шапку, чтобы при прокрутке таблицы не терять понимания значения столбцов и, следовательно, не теряться в них.
Фиксированная шапка для таблицы html можно сделать несколькими вариантами, но не все они просты в реализации и удобны в использовании.

Пример оптимально варианта реализации фиксированной шапки для таблицы

Важные пояснения реализации фиксированной шапки

Единственное, что тут нужно особенно пояснить - это то, что функция setThWidth() вызывается внутри события scroll для того, чтобы правильно рассчитать ширину столбцов. Если вызвать её при создании документа, то ширина столбцов будет рассчитана не верно и наши шапки не будут идентичными.

Html код таблицы с фиксированной шапкой

При этом HTML код выглядит следующим образом:

Css стили таблицы с фиксированной шапкой

Ну и CSS стили для липкой шапки в части обязательных правил будет выглядеть так:


Итак, наша липкая шапка готова, теперь пользователь не потеряется в названии столбцов.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Заметки вебмастера
Комментарии: 2
  1. Радмир

    а ты проверялсвой способ ? что то ява скрипт не работает

  2. Администратор (автор)

    Да, действительно была опечатка и скрипт не работал, спасибо за замечание. Сейчас все исправлено и протестировано, метод рабочий.

Добавить комментарий

четыре × 4 =

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Adblock
detector