Как закрепить заголовок у таблицы?
Возникла следующая проблема, необходимо закрепить заголовок у html таблицы, что бы скроллилось только нижняя часть.
Перепробовал уже с десяток разных решений, пробовал изобрести что то свое. Не получается.
Сложность в том, что помимо вертикального скролла, присутствует и горизонтальный и есть еще и colspan.
Пробовал, и разделить на две таблицы, тогда у верхней таблицы с заголовком нужно выравнивать длину ячеек, но найти нужного решения так и не смог.
Может кто сталкивался с подобной проблемой, подскажите решение
- Вопрос задан более трёх лет назад
- 31405 просмотров
- Вконтакте
Вот что набросал на скорую руку: http://jsfiddle.net/4jfQ6/
с горизонтальным и вертикальным скроллом, на первый взгляд, работает как и хотелось бы
Идеология следующая:
1. создаем шапку, которая будет фиксированной, для этого используем ширину и текст шапки таблицы
2. при прокручивании окна по горизонтали двигаем зафиксированную шапку
Липкая шапка таблицы на CSS
Практически на всех сайтах есть таблицы. А если эти таблицы имеют более дюжины строк, то вам, рано или поздно, понадобится сделать шапку таблицы «липкой». Многие до сих пор делают это с помощью JavaScript, но есть способ на чистом CSS.
Position Sticky Скопировать ссылку
Надо добавить position: sticky к <thead> (или <tr> , что там у вас в роли шапки?) и не забыть указать top :
Еще недавно в Chrome был баг, который не позволял делать липкими <thead> и <tr> , но в версии 91 его исправили. А всё благодаря тому, что в браузере теперь используется новый движок для рендеринга таблиц TablesNG.
Если вам всё-таки нужна поддержка и более старых версий, то можно сделать липкими сами ячейки ( <td> ) в шапке таблицы. Правда при этом будет сложно указать всем правильное значение top , когда шапка состоит из нескольких строк.
Как не выходить за рамки? Скопировать ссылку
К сожалению почти у всех таблиц, которые я встречаю, используется border-collapse: collapse . С этим свойством проще делать рамки для ячеек, но при этом сами рамки им уже не принадлежат, а как бы становятся частью самой таблицы. А это значит, что если шапка таблицы и стала липкой — рамки её ячеек всё равно прокручиваются вместе с таблицей.
Чтобы избавиться от этой проблемы, можно использовать border-collapse: separate . Да, с этим свойством рамки ячеек перестанут схлопываться, но нам это не помешает.
В некоторых дизайн-системах у ячеек есть только горизонтальные рамки, а значит достаточно просто указывать border-top или border-bottom . Но даже если вам нужно указать рамки со всех сторон, то есть много способов это сделать:
Рамки для конкретных сторон Скопировать ссылку
Рамки как box-shadow Скопировать ссылку
В примере выше мы устанавливаем расстояние между ячейками с помощью border-spacing для таблицы и отступ для прилипания с помощью top для шапки, равный размеру рамки. А затем добавляем ячейкам тень box-shadow , имитирующую рамку.
Рамки как outline Скопировать ссылку
В примере выше мы повторяем трюк из предыдущего примера, но имитирурем рамку с помощью outline .
Создание таблицы с фиксированной шапкой
Этот урок расскажет Вам о том как сделать таблицу с фиксированной шапкой, а также красивым эффектом выделения ячейки.
Подобная таблица будет очень полезна при большом количество полей и рядов. Любому пользователю будет очень легко в ней найти необходимую информацию.
Данный урок находится в категории CSS, так как закрепление шапки происходит благодаря этому языку. jQuery отвечает за подсветку полей и рядов.
В самом начале документа подключаем фреймворк, таблицу стилей и вспмогательный скрипт:
Далее создаем таблицу с заголовком с помощью тега <thead> и необходимым количеством рядов.
После открывающегося тега таблицы идут теги <colgroup> по количеству столбцов. Именно они отвечают за подсветку столбцов и рядов в таблице. Также в таблице использован тег <thead> для выделения заголовка таблицы и ему в таблице стилей присвоены следующие стили:
Это дает эффект фиксирования. В этот заголовок можно вставить картинку, как и сделано в нашем примере.
Надеюсь, урок был полезным для Вас. Всего наилучшего!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 9 Июля 2009
Просмотров: 79447
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Как зафиксировать заголовок таблицы при прокрутке?
Есть таблица в контейнере с жёстко заданной высотой. При большом количестве строк в таблице у окружающего блока появляется полоса прокрутки. Однако имеется проблема — заголовок таблицы уезжает наверх, и его не видно. Как зафиксировать его, чтобы он всегда был виден наверху блока?
Я пытался назначить ему вот такие CSS свойства, но видимого результата нет.
Какие есть способы решения проблемы? Желательно обойтись без разбиения таблицы не две, т.к. в таком случае могут разойтись столбцы.
Для удобства вот пример моей вёрстки.
К сожалению, сейчас position: sticky практически нигде не поддерживается, поэтому данный ответ не очень полезный 🙁
Судя по этому ответу на enSO из-за бага в Chrome, свойство position: sticky нужно присваивать не заголовку таблицы ( thead ), а ячейкам этого заголовка ( th ). Ну и ещё стоит добавить к ним белый фон. Примерно так: