CSS свойство table-layout

Свойство 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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
14.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Какие значения могут быть у свойства CSS 'table-layout'?
Считаете ли это полезным?