Таблиці в Bootstrap 4

table-layout

У попередньому розділі ми обговорювали верстку. І говорили про побудову вмісту з позиції дизайну як геометрична структура вашої програми змінює сенс його використання.

Але макет має певне значення у різному контексті. У контексті таблиць це означає, як браузер визначає розміри стовпців та рядків елемента table на основі вмісту кожної комірки таблиці та CSS, який застосовується браузером і вами.

Цей процес воістину чарівний.

Складний алгоритм компонування застосовується і для горизонталі і для вертикалі. І ці схожі алгоритми раніше ґрунтувалися на вказаному вами table-layout, який має два варіанти:

auto. За замовчуванням. Намагається встановити розмір стовпців, ґрунтуючись на найширшому осередку в кожному стовпці, якщо не задана явна ширина. Після чого використовується вказана ширина для порівняльних порівнянь. Специфікація CSS.

fixed. Намагається встановити розмір стовпців рівномірно, якщо не вказана конкретна ширина пікселів. У цьому випадку розміри будуть задані точно, якщо у вас немає помилок математики. Специфікація CSS.

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

Приклад 1. Ширина не задана

Зверніть увагу, що у випадку fixed розміри стовпців рівні, оскільки ширина ніде не вказано, але у випадку auto їх розміри пропорційні ширині вмісту комірки.

Приклад 2. Ширина у відсотках

Тепер поглянемо на той же приклад із шириною стовпців, встановлених як 20% і 50% відповідно.

Увімкнути white-space: nowrap

В обох випадках задана нами ширина береться до уваги, але лише відносно. Це завжди так з auto, але в даному випадку це так і для fixed, тому що вся ширина вказана у відсотках. Браузер каже, "20% — це 2/7 від загального 20 +50%", тому, коли таблиця має ширину 1000px, перший стовпець закінчується на 284px, а другий стовпець на 714px, приблизно у співвідношенні 2:5 (це не буде точно 2:5 через cellspacing, cellpadding, border, border-spacing, border-collapse тощо, округлення та інших обмежень).

Зверніть увагу, що white-space: nowrap застосовуються до кожного осередку, у випадку auto ця властивість компенсується, але у випадку fixed відбувається накладання тексту.

Приклад 3: Ширина в різних одиницях

Тепер поглянемо на той же приклад із шириною стовпців, у становлених як 400px і 70% відповідно.

Добре... Оскільки ширина кожної таблиці 694px , у браузера немає жодної можливості, щоб стовпці відповідали 400px і 70%×694px. Так що він робить все, що від нього залежить.

У випадку auto, задана нами ширина береться до уваги, але лише відносно. Браузер порівнює 400/694 з 70%×694 і робить все від нього залежне (поведінка варіюється від браузера до браузера). значення мають пріоритет над значеннями у відсотках, так що другий стовпець отримує залишок. Головна причина використовувати таблиці в додатку — це відображення табличних даних. Під табличними даними мається на увазі те, що ви могли б відобразити у вигляді матриці. вигляді зебри або використовуйте :hover з фоновим кольором (або чимось аналогічним), щоб допомогти очам зв'язати комірки з одного рядка.

Стовпці з числовими даними повинні бути вирівняні з правого краю, так щоб цифри були один під одним. justify).

При можливості, висота рядків має бути однаковою, щоб було простіше сканувати по вертикалі (цей загальний принцип відомий у бізнесі як «вертикальний ритм» і він дуже важливий).

Таблиці як інструмент верстки

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

Якщо ви орієнтуєтеся на браузер Internet Explorer 10+, використовуйте flex. Філіп Уолтон написав чудовий посібник з вертикального центрування через flexbox.

Глюки таблиць

Є ооочень багато причин, чому ви не повинні використовувати таблиці ні для чого, крім табличних даних або центрування по вертикалі (як описано). Але для відправної точки ось деякі дуже поширені глюки, які розчаровують при роботі з таблицями. Глюк 1: Осередки таблиці не поважають overflow (table-layout: auto, Firefox, IE) Це означає, що навіть якщо ви використовуєте table-layout: fixed і вкажіть ширину в пікселях, overflow: hidden не буде насправді працювати для осередків таблиці в будь-якому браузері. Якщо ви використовуєте table-layout: auto, будь-які значення overflow не дотримуються у всіх браузерах.

Глюк 2. Осередки таблиці не поважають відносне позиціонування (Firefox)

Ага. Ви правильно мене зрозуміли. Ви йдете і застосовуєте position: relative до осередку таблиці, додаєте position: absolute до елемента всередині, а Firefox замість цього він буде позиціонований щодо раніше позиціонованого батька таблиці. Стрічка.

Про це базі рапортували в 2000 році.

Глюки; для тих, кому ліньки читати

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

Дальнє читання

• w3: CSS2 Tables specification
• Drewish: Vertical rhythm tool