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

Значение по умолчанию: auto
Применяется к: table и inline-table элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: CSS 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

table-layout: auto | fixed | initial | inherit

Примеры написания кода свойства table-layout:

table {
    width: 250px;
    table-layout: fixed;
}

Фиксированный алгоритм разметки таблицы позволяет браузеру разметить таблицу быстрее, чем алгоритм автоматической разметки таблицы. Браузер может начать отображать таблицу после получения первой строки.

Алгоритм автоматической разметки таблицы может замедлить рендеринг таблицы, имеющей большое количество строк или столбцов, поскольку он требует, чтобы браузер имел доступ ко всему содержимому таблицы до определения окончательной разметки.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
auto Для макета таблицы устанавливается алгоритм автоматической раскладки таблицы. Ширина таблицы и ее ячеек зависит от содержимого ячейки. Это значение установлено по умолчанию.
fixed

Устанавливается фиксированный алгоритм разметки таблицы для разметки таблицы.

  • Горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов, границ и расстояния между ячейками.
  • Ширина таблицы и столбцов задаются шириной элементов таблиц и столбцов или шириной первого ряда ячеек.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента table-layout.

Поддержка браузеров

Свойство table-layout поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.