Як робляться в Bootstrap таблиці?

35

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

Про таблиці в bootstrap говорити особливо нічого. Тут є кілька класів для оформлення, а також можливість зробити таблицю повністю адаптивної. Зараз все це розглянемо. Робіть таку ж таблицю, яку робите зазвичай: за допомогою тегів table, tr і td. Наприклад:

Клітинка 1 Осередок 2 Осередок 3
Клітинка 1 Осередок 2 Осередок 3
Клітинка 1 Осередок 2 Осередок 3

За замовчуванням без стилів бутстрап виглядає вона зовсім бідно:

Але варто тільки додати тегу table клас table (банально, чи не так?) і все стає на свої місця:

Справа в тому, що якщо таблицю просто вставити в body, то вона буде розтягнуто на весь екран, навіть якщо в ній всього 1 клітинка, тому вставляйте таблицю безпосередньо в якийсь блок, який має обмеження по ширині.

З допомогою додаткового класу table-striped ви можете зробити так, щоб ряди таблиці забарвлювалися по черзі в 2 різні кольори:

Власне, якщо ви хочете, щоб осередки мали кордону з усіх боків, а не тільки зверху, додайте таблиці клас table-bordered. Так вона буде виглядати стандартного:

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

Адаптивність та ширина таблиці

Бачу, що багатьох з вас турбують питання, пов’язані з тим, як зробити bootstrap адаптивну таблицю і як взагалі керувати її шириною. Як я вже сказав, ніякої шириною керувати не потрібно, та й ніяку адаптивність теж не варто реалізовувати. Все дуже просто, вам досить обернути таблицю div з класом table-responsive:


Таблиця за замовчуванням буде стискатися до тих пір, поки це можливо. Якщо ж вміст комірок просто перестане поміщатися на сторінці, утворюється горизонтальна прокрутка. Щоб прибрати її, як раз і використовують клас table-чуйний, але він задається не таблиці, а блоку, який виступає для неї контейнером.

Що робить цей клас? По-перше, при ньому не буде відбуватися з’їжджання тексту у вічках. По-друге, навіть якщо сама таблиця не поміститься по ширині, з’явиться горизонтальна прокрутка, але не для вікна в цілому, а тільки в межах самої таблиці.

Фарбування рядів клітинок

Використовуйте класи active, success, info, warning і danger для застосування фонового кольору до цілих рядів або окремим осередкам. Приклад:

Клітинка 1 Осередок 2 Осередок 3
Клітинка 1 Осередок 2 Осередок 3
Клітинка 1 Осередок 2 Осередок 3

Загалом, ми розглянули загальні моменти роботи з таблицями, які є в Bootstrap за замовчуванням. Як бачите, нічого складного немає.