Меню

Bootstrap закрепить шапку таблицы



Bootstrap 3 — Оформление HTML таблиц

На этом уроке Вы научитесь создавать HTML таблицы и оформлять их с помощью CSS классов платформы Twitter Bootstrap 3.

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

Создание таблицы осуществляется посредством тегов языка HTML. После создания таблицы веб-разработчик переходит к её оформлению с помощью написания правил CSS. Данный процесс можно значительно упростить, используя большое количество готовых CSS классов платформы Twitter Bootstrap 3. Процесс оформления таблицы с помощью Twitter Bootstrap осуществляется путём добавления к таблице или к её различным частям (строке, ячейке) соответствующих классов. Задавая те или иные классы, Вы тем самым задаёте то или иное оформление таблицы.

Основы создания таблиц в HTML

Создание таблицы в HTML начинается с элемента table (

.

), внутри которого помещают шапку (

.

) и основное содержимое (

.

). Далее в элемент thead и tbody помещают строки (

.

). После этого в элементе tr (

.

) создают ячейки с помощью элементов td (

.

) и th (

.

), внутрь которых помещают содержимое, которое должно выводиться в этой ячейке. Элемент th (

.

) обычно используют в шапке, т.к. он придаёт жирное начертание тексту и выравнивает его по центру.

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

  • rowspan=»N» — объединяет N ячеек по вертикали;
  • colspan=»N» — объединяет N ячеек по горизонтали.

Применять данные атрибуты можно для элементов td и th .

Для указанания названия таблицы используется элемент caption ( . ), который размещается внутри элемента table сразу же после его открывающего тега.

Оформление таблиц с помощью CSS классов Bootstrap

Базовое оформление таблиц

Для придания таблицы базового оформления необходимо добавить класс .table к элементу table :

Оформление таблиц по типу полос «зебры»

Для выделения нечётных строк основной части таблицы (

.

) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table .

Создание таблицы с границами

Также вы можете добавлять границы для всех ячеек таблицы, просто добавив дополнительный класс Bootstrap .table-bordered к базовому классу .table.

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)

Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента

.

Выше приведенный пример будет выглядеть примерно так:

№ п/п Имя Фамилия E-mail
1 Иван Чмель ivan@mail.ru
2 Петр Щербаков petr@mail.ru
3 Юрий Голов yuri@mail.ru

Создание сжатой или компактной таблицы

Вы можете также сделать свои таблицы более компактными посредством добавления дополнительного класса .table-condensed к базовому классу .table. Класс .table-condensed делает таблицу компактной за счет уменьшения отступов в ячейках наполовину.

Выше приведенный пример будет выглядеть примерно так:

Дополнительные акцентные классы для строк таблицы

Существуют вспомогательные классы, которые позволяют выделить строку или отдельные ячейки различным цветом посредством окраски их фона.

Вышеприведенный пример будет выглядеть примерно так:

Создание адаптивной таблицы с помощью Bootstrap

С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки. При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.

Табличные теги, поддерживаемые Twitter Bootstrap 3

В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.

Источник

Верстка адаптивной шапки на Bootstrap

На этом уроке мы сделаем верстку адаптивной шапки сайта (лендинга), используя Bootstrap сетку. Если вы не знаете что это такое, советую почитать статью «Верстка PSD макета по Bootstrap 4 сетке» (часть 1 и часть 2).

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

Для наглядности я установил в браузере расширение Bootstrap Grid, чтобы показать вам на примере шапки сайта, как распределятся 12 колонок сетки между тремя её блоками.

На больших и средних экранах:

  • номер телефона занимает 2 колонки (col-lg-2)
  • меню с ссылками — 8 колонок (col-lg-8)
  • кнопка — 2 колонки (col-lg-2)

У вас уже должен быть в хедере подключен Bootstrap. Дальше создадим всю необходимую HTML структуру, частично используя бутстраповские и свои CSS классы.

Обернем нашу шапку в основной блок с классом header, которому зададим белый цвет шапки и сделаем нижнюю серую границу.

.header <
border-bottom: 1px solid #f5f5f5;
background-color: #fff;
>

По макету размер шапки сайта (ширина между двумя направляющими) равен 960 пикселей. Для фиксированной ширины контейнера, есть бутстраповский класс container. В контейнере всегда есть строка row, а в строке — столбцы col. Структура Bootstrap сетки напоминает таблицу. Элементы шапки сайта расположены в одну строку и занимают определенное количество колонок.

Внутри первого блока вставляем кликабельный номер телефона (для мобильных телефонов).

Во второй блок вставим навигационные ссылки для меню шапки. Обратите внимания, что я здесь не использую, привычные теги списков . Считаю, что для построения одноуровневого меню — это лишний код.

В третий блок поместим кнопку.

Поместим все три блока в кастомный флекс-контейнер header__inner.

Это необходимо для выравнивания всех элементов шапки в CSS стилях.

.header__inner <
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
max-width: 960px;
height: 50px;
margin: 0 auto;
line-height: 50px;
>

Этот CSS код выравнивает ссылки в меню.

.topnav <
display: flex;
align-items: center;
justify-content: center;
>

Как сделать шапку сайта адаптивной?

Из-за плотного заполнения пространства шапки, при уменьшении экрана элементы начинают наезжать друг на друга и ломается верстка. Просто для всех не хватает места. Лучшим решением будет , заменить широкое меню на маленькую иконку гамбургер. Можно взять готовую иконку с FontAwesome и вставить в код сразу после кнопки.

Теперь на ширине экрана меньше чем 960 пикселей, вместо пунктов меню с правого боку появится иконка. Как по клику по иконке вызвать меню, читайте здесь или здесь.

@media screen and (max-width: 960px) <
.topnav <
display: none;
>

.topnav__btn <
margin-right: 20px;
>

.topnav__icon <
display: block;
background: #fff;
border: none;
font-size: 25px;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
top: 6px;
right: 10px;
>

Заключение

Умение эффективно пользоваться Bootstrap позволяет верстальщикам, не знающим JavaScript, взаимодействовать с пользователями. Хотите узнать об этом больше? Переходите на сайт видео-курса по Bootstrap.

Источник

Фиксированный заголовок таблицы HTML

Таблицы довольно часто используются для отображения некоторой статистической информации и не только. Наличие большого количества строк в таблице наводит на здравую идею — фиксацию заголовка таблицы для удобного восприятия данных из неё. Для реализации этой затеи одной стандартной таблицей, к сожалению, не обойтись, однако в этом нет ничего страшного, и в нашем примере мы рассмотрим решение этой проблемы посредством использования двух разных таблиц.

Наверное, вы уже догадались, что первая таблица будет использоваться для отображения именно фиксированной части заголовка. Вторая – будет отображать само содержимое таблиц. Для разделения таблиц так же будут использованы блоки div, и для задания одинаковых размеров для ячеек таблиц будут использованы общие атрибуты в CSS. Для второй таблицы будет доступен скроллинг, таким образом, она будет скролиться по отношению к первой таблице.

HTML разметка таблицы

Для наглядного примера мы сделали таблицу довольно содержательной, теперь код CSS стилей.

CSS стили таблицы

Так же для правильного отображения таблицы при ресайзинге мы воспользуемся простым Javascript-кодом:

Наглядный пример того что получилось вы можете просмотреть на демо-странице ссылка которой будет ниже. Если это показалось вам сложным решением, то не стоит раньше времени расстраиваться, попробуйте реализовать это дело самим, и вы поймете, что нет ничего сложного. Касательно темы таблиц так же рекомендую к прочтению статью о сортируемых таблицах Data Tables.
Демо | Скачать в архиве

Источник

Блог Vaden Pro

Оформляем таблицы с Bootstrap

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

Если у Вас нет желания уделять внимание оформлению таблиц, то воспользоваться для этой цели Bootstrap будет весьма рациональным выбором.

Предположим мы уже создали обычную таблицу:

И на данном этапе без оформления она у нас выглядит следующим образом:

Вот и пришло время прибегнуть к помощи нашего CSS фреймфорка.

Стандартное оформление таблицы

Для того, чтобы подключить Bootstrap оформление к созданной нами таблице в самом минимальном варианте необходимо присвоить тегу table соответствующий класс:

После внесения данных изменений в код таблица примет следующий вид:

Как мы видим, во-первых она расширилась до размеров родительского контейнера, во-вторых у ячеек появились отступы, изменился шрифт, в-третьих появились разделители между строками.

В целом минимальные требования к оформлению уже выполнены, но мы можем продолжить стилизовать таблицу доводя ее до необходимой нам кондиции.

Таблица с чередующимися строками

Добавляя к table класс .table-striped мы получаем из нашей заготовки симпотичную табличку с чередующимися фонами у строк:

На всякий случай уточню, что в этом случае в код внесены следующие изменения:

Таблица с границами

Если на чем-то не устраивает отсутствие вертикальных границ и охота получить просто обычную таблицу с нормальными отступами, то стоит воспользоваться классом .table-bordered.

В результате следующего сочетания:

Реагирующие на наведение строки

Чтобы добавить динамичности, да и в целом удобства в обращении с таблицей (лично мне удобнее читать информацию, когда текущая строка подсвечивается), можно воспользоваться классом .table-hover. Он изменяет цвет строки на которую наведен курсор мыши.

Компактный вариант

Если кому-то не нравятся слишком большие отступы до границ ячеек или же просто следует уместить больше информации в ограниченном пространстве, то на выручку приходит класс .table-condensed

Ячейки и строки с заданными фонами

При желании мы можем менять фоны у строк и ячеек по своему усмотрению.

Для этого соответствующих тегов (tr, td) можно присваивать классы добавляющие им цвета.

В нашем распоряжении имеется 5 таких классов:

  • .active – сероватый фон, цвет используется тот же, что у активных строк в случае применения к таблице класса .table-hover
  • .success – приятный салатный цвет фона
  • .info – нейтральный, голубоватый оттенок цвета
  • .warning – пастельный желтый цвет
  • .danger – фон в красных тонах призванный обращать на себя внимание

Чтобы не запутаться давайте доработаем наш исходный код с применением данных классов:

Даже когда мы не добавляем ничего к самому тегу table, должен в нем присутствовать, чтобы корректно работали все остальные.

В результате проделанных манипуляций у нас выйдет следующая картина:

«Отзывчивые» таблицы

Разработчики Bootstrap позаботились о удобстве создания мобильных версий сайтов. Так появились классы делающие элементы дизайна «отзывчивыми».

В случае таблиц это класс .table-responsive, который присваивается РОДИТЕЛЬСКОМУ для table тегу:

Принцип действия у него следующий- если ширина экрана оказывается меньше 769 пикселей и содержимое таблице не вмещается в отводимое ей пространство, то под ней появляется горизонтальная полоса прокрутки:

Комбинирование классов

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

Ну а уникальные штрихи можно добавить уже воспользовавшись своим файлом CSS.

Если вы еще не знакомы тесно с Bootstrap, то о прочих возможностях данного фреймворка можно узнать во вводном уроке курса.

Источник

Таблица с липкой шапкой

Инструкция как сделать липкую шапку таблицы без использования JavaScript и без jQuery. Фиксированные заголовки таблицы сделанные на чистом CSS.

Если вы занялись задачей сделать липкий заголовок таблицы и смотрели уже какие для этого решения предлагает поиск гугла, то вы видели эти портянки js-кода с идеей дублирования заголовков таблицы.

На самом деле эта типовая задача решается при помощи всего лишь трёх строчек css-кода. И это в буквальном смысле.

Вот посмотрите такое DEMO таблицы:

ID 2 3 4 5
1 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
2 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
3 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
4 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
5 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
6 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
7 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
8 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
9 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
10 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
11 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
12 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
13 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
14 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
15 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
16 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
17 Второй столбик. Третьий столбик. Четвёртый столбик. Пятый столбик.
18 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
19 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.
20 Второй столбик. Третий столбик. Четвёртый столбик. Пятый столбик.

Ну как вам такое? Правда круто?

Эта таблица имеет самый обычный html:

Липкой шапку таблицы делает css-свойство position с установленным значением sticky . Плюс добавлены свойства top и z-index , чтобы всё работало правильно:

Так же у меня в этом блоке стилей прописаны фон шапки и цвет текста. Это для того чтобы стилизовать шапку таблицы:

Источник

Читайте также:  Шапки вязаные с диагональным рисунком