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


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; 


}

Додаткові посилання