table-layout

auto

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

fixed

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

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

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

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

table-layout = 
  auto   |
  fixed  

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

HTML

<table>
  <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>
</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 таблицы