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

Свойство table-layout CSS задаёт алгоритм размещения ячеек, строк и столбцов <table>.

Попробуйте

table-layout: auto;
width: 150px;

table-layout: fixed;
width: 150px;

table-layout: auto;
width: 100%;

table-layout: fixed;
width: 100%;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tbody>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
      <tr>
        <td>Lion</td>
        <td>Africa</td>
      </tr>
      <tr>
        <td>Norwegian Lemming</td>
        <td>Europe</td>
      </tr>
      <tr>
        <td>Seal</td>
        <td>Antarctica</td>
      </tr>
      <tr>
        <td>Tiger</td>
        <td>Asia</td>
      </tr>
    </tbody>
  </table>
</section>

table {
  border: 1px solid #113399;
}

th,
td {
  border: 2px solid #aa1199;
  padding: 0.25rem 0.5rem;
}

Синтаксис

/* Keyword values */
table-layout: auto;
table-layout: fixed;

/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Используется алгоритм автоматической раскладки таблицы. Ширина таблицы и её ячеек корректируется в соответствии с содержимым. Большинство браузеров используют этот алгоритм по умолчанию.

fixed

Используется алгоритм фиксированной раскладки таблицы. При использовании этого ключевого слова ширина таблицы должна быть задана явно с помощью свойства width. Если значение свойства width задано как auto или не указано, браузер использует алгоритм автоматической раскладки таблицы, в этом случае значение fixed не оказывает эффекта.
Алгоритм фиксированной раскладки таблицы быстрее алгоритма автоматической раскладки, поскольку горизонтальная раскладка таблицы зависит только от ширины таблицы, ширины столбцов, границ и интервалов между ячейками. Горизонтальная раскладка не зависит от содержимого ячеек, так как учитываются только явно заданные значения ширины.

При использовании алгоритма фиксированной раскладки таблицы ширина каждого столбца определяется следующим образом:

• Элемент столбца с явно заданной шириной задаёт ширину этого столбца.
• В противном случае ширина ячейки в первой строке, заданная явно, определяет ширину этого столбца.
• В противном случае столбцу назначается часть общего оставшегося горизонтального пространства.

При использовании этого алгоритма всю таблицу можно отобразить после загрузки и анализа первой строки. Это может ускорить отображение по сравнению с методом «автоматической» раскладки, однако содержимое последующих ячеек может не поместиться в выделенную ширину столбцов. Ячейки используют свойство overflow, чтобы определить, следует ли обрезать выходящее за границы содержимое, но только если ширина таблицы известна; в противном случае содержимое не будет выходить за границы ячеек.

Формальное определение

Формальный синтаксис

table-layout = 
  auto |
  fixed

Примеры

Таблицы фиксированной ширины с text-overflow

В этом примере используется фиксированная раскладка таблицы в сочетании со свойством width, ограничивающим ширину таблицы. Свойство text-overflow добавляет многоточие к словам, которые слишком длинные и не помещаются. Если бы раскладка таблицы была auto, таблица увеличивалась бы, чтобы вместить содержимое, несмотря на заданное значение width.

HTML

<table>
  <tbody>
    <tr>
      <td>Ed</td>
      <td>Wood</td>
    </tr>
    <tr>
      <td>Albert</td>
      <td>Schweitzer</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Fonda</td>
    </tr>
    <tr>
      <td>William</td>
      <td>Shakespeare</td>
    </tr>
  </tbody>
</table>

CSS

table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• <table>
• Модуль таблиц CSS