Свойство table-layout указывает алгоритмы, используемые для расположения ячеек таблицы, строк и колонок.
Свойство table-layout указывает два алгоритма - fixed и automatic.
Когда макет таблицы указан как "automatic", ширина таблицы зависит от ширины ее колонок.
Когда макет таблицы указан как "fixed", он использует ширину таблицы, указанную ширину колонок и значения атрибутов border и cellspacing.
Значение по умолчанию | auto |
Применяется | К элементам, для которых значение display установлено как table или inline-table. |
Наследуется | Нет |
Анимируемое | Нет |
Версия | CSS2 |
DOM синтаксис | object.style.tableLayout = "fixed"; |
Синтаксис
table-layout: auto | fixed | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
th, td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 40%;
}
</style>
</head>
<body>
<h2>Пример свойства table-layout</h2>
<h3>Table-layout: fixed; width: 20%</h3>
<table class="t1">
<tr>
<th>Страна</th>
<th>Столица</th>
<th>Город</th>
</tr>
<tr>
<td>Россия</td>
<td>Москва</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Англия</td>
<td>Лондон</td>
<td>Манчестер</td>
</tr>
<tr>
<td>Нидерланды</td>
<td>Амстердам</td>
<td>Хааге</td>
</tr>
</table>
</body>
</html>
Пример с использованием алгоритмов “auto” и “fixed”:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
th,td {
border: 2px solid #666;
}
table.t1 {
table-layout: fixed;
width: 250px;
}
table.t2 {
table-layout: auto;
width: 100%;
}
</style>
</head>
<body>
<h2>Пример свойства table-layout</h2>
<h3>Table-layout: fixed; width: 160px</h3>
<table class="t1">
<tr>
<th>Страна</th>
<th>Столица</th>
<th>Город</th>
</tr>
<tr>
<td>Россия</td>
<td>Москва</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Англия</td>
<td>Лондон</td>
<td>Манчестер</td>
</tr>
<tr>
<td>Нидерланды</td>
<td>Амстердам</td>
<td>Хааге</td>
</tr>
</table>
<h3>Table-layout: auto; width: 100%</h3>
<table class="t2">
<tr>
<th>Страна</th>
<th>Столица</th>
<th>Город</th>
</tr>
<tr>
<td>Россия</td>
<td>Москва</td>
<td>Санкт-Петербург</td>
</tr>
<tr>
<td>Англия</td>
<td>Лондон</td>
<td>Манчестер</td>
</tr>
<tr>
<td>Нидерланды</td>
<td>Амстердам</td>
<td>Хааге</td>
</tr>
</table>
</body>
</html>
Значения
Значение | Описание |
---|---|
auto | Использует алгоритм автоматического размещения макета. Значение по умолчанию. |
fixed | Использует алгоритм фиксированного размещения макета. Ширина таблицы, колонка и первая строка ячеек устанавливают ширину таблицы и колонки. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
14.0+ | 12.0+ | 1.0+ | 1.0+ | 7.0+ |
Практикуйте свои знания
Какие значения могут быть у свойства CSS 'table-layout'?
Правильный!
Неправильно!