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

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

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

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

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

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

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

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

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

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

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