Гарний плаваючий заголовок у таблиці

Відео: Як закріпити шапку в Excel

Відео: Як в Ексель закріпити шапку таблиці?

Таблиці служать для компактного розміщення великого обсягу даних. А на красиво оформлені таблиці дивитися значно приємніше, ніж на ті, властивості яких задані за замовчуванням браузером. Також є такий нюанс: коли таблиця більша і не влазить на всю висоту екрану при прокручуванні можна забути для чого призначений той чи інший стовпець. Тому в цьому уроці ми створимо гарний плаваючий заголовок таблиці, які при прокручуванні вікна буде переміщатися вгорі, тим самим роблячи перегляд зручнішим для користувача.

Таблиці можна буде прокручувати також по горизонталі, а перша колонка з текстом, буде також плавно слідувати зліва.

Взагалі, легше побачити та зрозуміти що я тут хочу вам сказати # 128578; . Приклад таблиць з плаваючими колонками і заголовком можна побачити тут:

Подивитися прімерСкачать

HTML частина

Нічого незвичайного в структурі таблиці немає. Вона складається з тих же блоків як і завжди:

123456789101112131415161718192021222324252627

lt;tablegt;lt;theadgt;lt;trgt;lt;thgt; lt;/thgt;lt;thgt; lt;/thgt;lt;thgt; lt;/thgt;lt;/trgt;lt;/theadgt;lt;tbodygt; ...lt;trgt; ...lt;tdgt; lt;/tdgt;lt;tdgt; lt;/tdgt;lt;tdgt; lt;/tdgt; ...lt;/trgt;lt;trgt; ...lt;tdgt; lt;/tdgt;lt;tdgt; lt;/tdgt;lt;tdgt; lt;/tdgt; ...lt;/trgt; ...lt;/tbodygt;lt;/tablegt;

CSS частина

Додамо стилів нашої таблиці:

Відео: Як закріпити робочу область таблиці

1234567891011121314151617181920212223242526272829303132333435363738

table {margin: 0 auto 1.5em-width: 75%-}.sticky-wrap {overflow-x: auto-position: relative-margin-bottom: 1.5em-width: 100%-}.sticky-wrap .sticky-thead,.sticky-wrap .sticky-col,.sticky-wrap .sticky-intersect {opacity: 0-position: absolute-top: 0-left: 0-transition: all .125s ease-in-out-z-index: 50-width: auto-}.sticky-wrap .sticky-thead {box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125)-z-index: 100-width: 100%-}.sticky-wrap .sticky-intersect {opacity: 1-z-index: 150-}.sticky-wrap .sticky-intersect th {background-color: # 666-color: #eee-}.sticky-wrap td,.sticky-wrap th {box-sizing: border-box-}