Таблиця-макет - CSS-хитрощі

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

table ( table-layout: fixed; )

Як пояснюється в специфікації CSS2.1, розміщення таблиці в цілому, як правило, є питанням смаку і залежить від вибору дизайну. Однак браузери автоматично застосовуватимуть певні обмеження, які визначатимуть спосіб розміщення таблиць. Це трапляється, коли для table-layoutвластивості встановлено значення auto(за замовчуванням). Але ці обмеження можна зняти, якщо table-layoutвстановлено значення fixed.

Цінності

auto: за замовчуванням. Автоматичний алгоритм браузера використовується для визначення того, як розташовані рядки, комірки та стовпці таблиці. Отриманий макет таблиці, як правило, залежить від змісту таблиці.
fixed: З цим значенням макет таблиці ігнорує вміст і замість цього використовує ширину таблиці, будь-яку вказану ширину стовпців, а також значення меж та інтервалів між клітинками. Значення стовпців використовуються на основі ширини, визначеної для стовпців або комірок для першого рядка таблиці.
inherit: вказує, що значення успадковується від table-layoutзначення його батьківського елемента

Для того, щоб значення fixedмало якийсь ефект, ширину таблиці потрібно встановити на щось інше, ніж auto(за замовчуванням для widthвластивості). У демонстраційних демонстраціях нижче всі ширини таблиці встановлені на 100%, що передбачає, що ми хочемо, щоб таблиця заповнювала свій батьківський контейнер горизонтально.

Найкращий спосіб побачити ефекти алгоритму фіксованого розміщення таблиці - це використання демонстрації.

Див. Демонстраційну ручку для властивості макета таблиці CSS від Louis Lazaris (@impressivewebs) на CodePen.

Під час першого перегляду наведеної вище демонстрації ви помітите, що макет стовпців таблиці незбалансований та незручний. На той момент таблиця використовує алгоритм браузера за замовчуванням, щоб визначити спосіб складання таблиці, а це означає, що вміст буде диктувати макет. Демо-версія перебільшує цей факт, включаючи довгий рядок тексту всередині однієї комірки таблиці, тоді як усі інші комірки таблиці використовують лише по два слова. Як бачите, браузер розширює перший стовпець, щоб вмістити більший біт вмісту.

Якщо натиснути кнопку «Перемкнути макет таблиці: виправлено», ви побачите, як виглядає макет таблиці, коли використовується «фіксований» алгоритм. Коли table-layout: fixedзастосовується, вміст більше не диктує макет, але замість цього браузер використовує будь-яку визначену ширину з першого рядка таблиці для визначення ширини стовпців. Якщо в першому рядку немає ширини, ширина стовпців розподіляється порівну по таблиці, незалежно від вмісту всередині комірок.

Подальші приклади можуть допомогти зрозуміти це. У наступній демонстрації таблиця містить елемент, перший елемент якого має ширину 400px. Зверніть увагу, у цьому випадку перемикання table-layout: fixedне впливає.

Див. Демонстраційну ручку для властивості макета таблиці CSS від Louis Lazaris (@impressivewebs) на CodePen.

Це відбувається тому, що за замовчуванням алгоритм макета по суті говорить "зробити перший стовпець шириною 400 пікселів і розподілити решту стовпців на основі їх вмісту". Оскільки інші три стовпці мають такий самий вміст, як один одного, змін не буде. Але тепер давайте додамо трохи додаткового текстового вмісту в один з інших стовпців:

Див. Демонстраційну ручку для властивості макета таблиці CSS із шириною колів та змінним вмістом Луї Лазаріса (@impressivewebs) на CodePen.

Тепер, якщо ви натиснете кнопку перемикача, ви побачите, що стовпці коригуються відповідно до фіксованого макета, незалежно від вмісту. Ще раз повторюється те саме; для першого стовпця встановлено 400 пікс., тоді решта стовпці діляться порівну. Але цього разу, оскільки в одній із колонок є додатковий вміст, різниця помітна.

Як алгоритм фіксованого макета визначає ширину стовпців

Наступні дві демонстраційні демонстрації повинні допомогти зрозуміти, що перший рядок таблиці - це те, що допомагає визначити ширину стовпців таблиці, встановлену на table-layout: fixed.

Див. Демонстрацію пера щодо макета таблиці CSS із коміркою в рядку 1 із заданою шириною Луїсом Лазарісом (@impressivewebs) на CodePen.

У наведеній вище демонстраційній демонстрації перша комірка в першому рядку таблиці має ширину 350 пікселів. Перемикання table-layout: fixedрегулює інші стовпці, але перша залишається незмінною. Тепер спробуйте наступну демонстрацію:

Див. Демонстрацію пера щодо макета таблиці CSS із коміркою в рядку 2 із заданою шириною Луїсом Лазарісом (@impressivewebs) на CodePen.

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

Переваги алгоритму фіксованого макета

Естетичні переваги використання table-layout: fixedповинні бути зрозумілі з наведених вище демонстрацій. Але інша головна перевага - це продуктивність. Специфікація посилається на фіксований алгоритм як на «швидкий» алгоритм, і з поважної причини. Перед визначенням розміру стовпців браузеру не потрібно аналізувати весь вміст таблиці; йому потрібно лише проаналізувати перший рядок. Отже, результат - швидша обробка макета таблиці.