css властивість table-layout
CSS властивість table-layout задає алгоритм формування макету таблиці, який буде використовуватися для її відображення. Іншими словами, ця властивість визначає, як браузер повинен обчислювати ширину комірок таблиці, опираючись на їх вміст.
Основна перевага табличного макета полягає в тому, що вона дозволяє виправляти макет таблиці так, щоб таблиця показувалася користувачеві набагато швидше. Не роблячи цього, у великих таблицях користувачі не бачитимуть жодної частини таблиці, поки браузер не опрацює всю таблицю. Це може скласти враження, що ваша сторінка завантажується дуже повільно. З іншого боку, якщо ви використовуєте властивість table-layout, користувачі побачать верхню частину таблиці під час завантаження браузера та надання решти таблиці. Це створює враження, що сторінка завантажується набагато швидше.
Синтаксис
table-layout: auto|fixed|initial|inherit;Властивість table-layout може отримувати 4 значення:
autoБраузер завантажує всю таблицю, аналізує її для визначення розмірів комірок і тільки після цього відображає.
Ширина стовпчика задається найширшим нерозривним змістом в клітинці.
Може повільно працювати, тому, що браузер повиннен прочитати весь контент в таблиці, перш ніж визначити остаточний розмір таблиці.
fixedШирина колонок в цьому випадку визначається за допомогою тега
<col>, або обчислюється на основі її першого рядка. Якщо дані про форматування першого рядка таблиці з будь-яких причин отримати неможливо, тоді таблиця ділиться на колонки рівної ширини.При використанні цього значення, вміст, який не поміщається в комірку зазначеної ширини, буде «обрізано» або накладено поверх комірки. Це залежить від браузера, але в будь-якому випадку ширина комірок змінюватися не буде.
Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці. Алгоритму компоновки фіксованої таблиці:
- Горизонтальне розташування залежить тільки від ширини таблиці і ширини стовпців, а не вмісту комірок.
- Дозволяє браузеру відобразити таблицю швидше, ніж при автоматичному визначенні розмірів комірок таблиці.
- Браузер почне відображати таблицю після того, як перший ряд таблиці був отриманий.
initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.tableLayout="fixed" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| table-layout | 1.0 |
5.0 |
1.0 |
1.0 |
7.0 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| table-layout | 1.5 |
1.0 |
3.0 |
Мобільних переглядачів ще не додано.
Приклади
Значення властивості
Використання
Синтаксис
table {
table-layout: fixed;
}