Свойство table-layout
Описание
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Синтаксис
table-layout: auto | fixed;| Значение | Описание |
| auto | Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает. |
| fixed | Ширина колонок в этом случае определяется либо с помощью элемента col, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.example-2 {
width: 100%;
table-layout: fixed;
}
.example-2 td {
background: #d7e2fa;
}
</style>
<table class='example-2'>
<tr>
<td>Имя</td>
<td>Фамилия</td>
<td>Отчество</td>
</tr>
</table>
<style>
.example-1 {
width: 100%;
table-layout: auto;
}
.example-1 td {
background: #d7e2fa;
}
</style>
<table class='example-1'>
<tr>
<td>Имя</td>
<td>Фамилия</td>
<td>Отчество</td>
</tr>
</table>
</body>
</html>| Имя | Фамилия | Отчество |
| Имя | Фамилия | Отчество |
Читайте также
Свойство grid-row-end
Определяет местоположение в сетке ссылаясь на конкретные линии. <br>grid-column-end / grid-...
Свойство padding-inline
Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по ст...
Свойство overflow-x
Управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещ...
Свойство text-orientation
Устанавливает ориентацию текстовых символов в строке и применяется только к вертикальному тексту ...
Свойство grid-auto-rows
Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позицио...