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

Свойство CSS table-layout задаёт алгоритм, который браузер использует для расчёта ширины ячеек, строк и столбцов таблицы. Возможны два алгоритма — auto и fixed — и выбор между ними влияет как на размеры таблицы, так и на скорость её отрисовки.

На этой странице объясняется, как работает каждый алгоритм, когда следует использовать fixed и с какими сложностями (например, переполнением текста) он связан.

Как работают два алгоритма

auto (значение по умолчанию) позволяет содержимому определять ширину столбцов. Браузер должен прочитать каждую ячейку каждой строки, прежде чем сможет выполнить разметку, а затем расширяет каждый столбец по наиболее длинному фрагменту содержимого. Это даёт таблицу с естественным видом, однако означает, что таблица может смещаться по мере поступления нового содержимого, а очень длинные слова могут растянуть столбец шире, чем предполагалось.

fixed игнорирует содержимое большинства ячеек и определяет ширину столбцов на основе собственного значения width таблицы, явно заданной ширины столбцов (в ячейках первой строки или в элементах <col>), а также с учётом рамок и отступов. Поскольку разметка больше не зависит от каждой ячейки, браузер может отрисовать таблицу за один проход.

Есть две практические причины выбрать fixed:

Производительность. При auto большая таблица не может быть отрисована до тех пор, пока не будет разобрана и измерена целиком. fixed отображает строки по мере их поступления, поэтому длинная таблица появляется быстрее и страница воспринимается более отзывчивой.
Предсказуемость. Ширина столбцов остаётся именно такой, какой вы её задали, и не изменяется при изменении содержимого ячеек — полезно для таблиц данных с известной структурой.

Компромисс: при fixed содержимое, которое шире своего столбца, не расширяет столбец. По умолчанию оно выходит за границу ячейки. Как правило, fixed используют вместе с word-wrap / overflow-wrap, text-overflow или overflow, чтобы управлять поведением слишком длинного содержимого.

Начальное значение	auto
Применяется к	Элементам table и inline-table.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS2
Синтаксис DOM	object.style.tableLayout = "fixed";

Синтаксис

Синтаксис CSS table-layout

table-layout: auto | fixed | initial | inherit;

Примеры

Пример свойства table-layout со значением "fixed":

Пример кода CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 40%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами »

Результат

Пример свойства table-layout со значениями "auto" и "fixed":

Пример значений CSS table-layout

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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 property example</h2>
    <h3>Table-layout: fixed; width: 250px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>The Hague</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами »

При table-layout: fixed первая таблица сохраняет три равных столбца шириной 250px, как бы ни были длинны названия городов, тогда как таблица auto растягивается, чтобы уместить «Saint Petersburg». Это ключевое отличие: fixed соблюдает заданную вами ширину, auto подстраивается под содержимое.

Управление переполнением при table-layout: fixed

Поскольку столбцы в режиме fixed не расширяются под длинное содержимое, слово, превышающее ширину столбца, выходит за пределы ячейки. Исправить это можно, перенося или обрезая текст. В примере ниже показаны три распространённых подхода рядом друг с другом:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        table-layout: fixed;
        width: 300px;
        border-collapse: collapse;
      }
      td {
        border: 2px solid #666;
        width: 100px;
        padding: 4px;
      }
      .clip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wrap {
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Overflows by default</td>
        <td class="clip">Supercalifragilisticexpialidocious</td>
        <td class="wrap">Supercalifragilisticexpialidocious</td>
      </tr>
    </table>
  </body>
</html>

Средняя ячейка обрезает длинное слово с помощью многоточия (text-overflow: ellipsis), а правая переносит его на несколько строк (overflow-wrap: break-word).

Значения

Значение	Описание	Пример
auto	Использует алгоритм автоматической разметки, при котором размеры таблицы и её ячеек подстраиваются под содержимое. Это значение по умолчанию.	Пример »
fixed	Использует алгоритм фиксированной разметки таблицы. Ширину таблицы и столбцов задают ширина таблицы, элементов col и ячеек первой строки.	Пример »
initial	Устанавливает свойство в значение по умолчанию.	Пример »
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

table-layout используется совместно с другими CSS-свойствами для стилизации таблиц:

border-collapse — выбор между раздельными и объединёнными рамками ячеек.
border-spacing — задаёт расстояние между ячейками при раздельных рамках.
empty-cells — показывает или скрывает рамки и фоны пустых ячеек.
width — задаёт общую ширину таблицы, на которую опирается алгоритм fixed.
white-space — управляет переносом текста внутри ячеек фиксированной ширины.

Практика

Что делает свойство CSS table-layout?

Позволяет определять ширину отображения столбцов на веб-странице.Позволяет изменить стиль шрифта текста в таблице.Задаёт алгоритм разметки таблицы.Изменяет цвет фона таблицы.Определяет стиль рамки таблицы.