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

Свойство table-layout определяет алгоритмы, используемые для разметки ячеек, строк и столбцов таблицы.

Свойство table-layout определяет два алгоритма разметки таблиц: fixed (фиксированный) и auto (автоматический).

При указании автоматической разметки таблицы («auto») ширина таблицы определяется шириной её столбцов.

При указании фиксированной разметки («fixed») для отображения используются ширина таблицы, заданная ширина столбцов, а также значения border и cellspacing. Преимущество свойства table-layout со значением «fixed» заключается в производительности. На больших таблицах они не отображаются до тех пор, пока не будет отрисована вся таблица. Это создаёт впечатление более быстрой загрузки страницы.

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

Синтаксис

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

css

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

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

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

html

<!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: 20%</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>Haage</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Результат

CSS table-layout values

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

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

html

<!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: 160px</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>Haage</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>Hague</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

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

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

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

Синтаксис ​

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

Результат ​

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

Значения ​