Свойство 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>
Имя Фамилия Отчество
Имя Фамилия Отчество

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