Свойство 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>| Имя | Фамилия | Отчество |
| Имя | Фамилия | Отчество |
Читайте также
Свойство accent-color
Свойство accent-color определяет цвет акцента для некоторых элементов формы. Акцентом в данном сл...
Свойство border-left
Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.<br>Значения...
Свойство border-color
Позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.
Свойство object-fit
Управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана шир...
Свойство hyphens
Указывает, как расставлять переносы слов в блоке текста.<br><br>Словарь переносов хра...