css властивість table-layout

CSS властивість table-layout задає алгоритм формування макету таблиці, який буде використовуватися для її відображення. Іншими словами, ця властивість визначає, як браузер повинен обчислювати ширину комірок таблиці, опираючись на їх вміст.

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

правити

+ додати пораду чи нотатку

Синтаксис

table-layout: auto|fixed|initial|inherit;

Властивість table-layout може отримувати 4 значень:

auto

Браузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.

Ширина стовпчика задається найширшим нерозривним змістом в клітинці.

Може повільно працювати, тому, що браузер повиннен прочитати весь контент в таблиці, перш ніж визначити остаточний розмір таблиці.

автор: Svitlana

правити

fixed

Ширина колонок в цьому випадку визначається за допомогою тега <col>, або обчислюється на основі її першого рядка. Якщо дані про форматування першого рядка таблиці з будь-яких причин отримати неможливо, тоді таблиця ділиться на колонки рівної ширини.

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

Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці. Алгоритму компоновки фіксованої таблиці:

• Горизонтальне розташування залежить тільки від ширини таблиці і ширини стовпців, а не вмісту комірок.
• Дозволяє браузеру відобразити таблицю швидше, ніж при автоматичному визначенні розмірів комірок таблиці.
• Браузер почне відображати таблицю після того, як перший ряд таблиці був отриманий.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	14	1	1	7	12	5

Підтримка: мобільні переглядачі

Переглядач
	1.5	18	4	3

Приклади

+ запропонувати свій приклад у пісочниці

<table class="auto">
    <tr><td>auto: колонка тягнеться за довгим вмістом</td><td>коротко</td></tr>
</table>
<table class="fixed">
    <tr><td>fixed: колонки рівні незалежно від вмісту</td><td>коротко</td></tr>
</table>

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

td {
    border: 1px solid #0172ad;
    padding: 6px;
}

.auto  { table-layout: auto; }
.fixed { table-layout: fixed; }