Свойство 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>Читайте также
Свойство overflow-y
Управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока....
Свойство perspective
Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умол...
Свойство columns
Универсальное свойство, которое позволяет задать ширину и количество колонок многоколоночного текста одновременно....
Функция radial-gradient()
Функция добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не ...