Макет таблицы

Классы table-auto и table-fixed задают свойство table-layout — способ, которым браузер делит ширину таблицы между колонками. Берите table-fixed, когда колонки должны быть предсказуемой ширины независимо от данных.

Пример

Одинаковые таблицы с разным классом. С table-auto длинный текст забирает колонке почти всю ширину, с table-fixed колонки делят ширину поровну, а текст переносится.

Ключ	Описание	Статус
id	Длинный текст забирает колонке почти всю ширину таблицы	Готово
name	Коротко	Черновик

table-auto

Ключ	Описание	Статус
id	Длинный текст переносится внутри колонки равной ширины	Готово
name	Коротко	Черновик

table-fixed

HTML

<div class="flex flex-col gap-4">
  <div class="flex flex-col gap-1">
    <table class="table table-auto m-bottom-0">
      <thead>
        <tr><th>Ключ</th><th>Описание</th><th>Статус</th></tr>
      </thead>
      <tbody>
        <tr><td>id</td><td>Длинный текст забирает колонке почти всю ширину таблицы</td><td>Готово</td></tr>
        <tr><td>name</td><td>Коротко</td><td>Черновик</td></tr>
      </tbody>
    </table>
    <code class="text-1/2 color-on-surface-variant">table-auto</code>
  </div>
  <div class="flex flex-col gap-1">
    <table class="table table-fixed m-bottom-0">
      <thead>
        <tr><th>Ключ</th><th>Описание</th><th>Статус</th></tr>
      </thead>
      <tbody>
        <tr><td>id</td><td>Длинный текст переносится внутри колонки равной ширины</td><td>Готово</td></tr>
        <tr><td>name</td><td>Коротко</td><td>Черновик</td></tr>
      </tbody>
    </table>
    <code class="text-1/2 color-on-surface-variant">table-fixed</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`table-auto`	`table-layout: auto`	—
`table-fixed`	`table-layout: fixed`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Класс	Ширина колонок
`table-auto`	по содержимому всех ячеек; поведение таблиц по умолчанию
`table-fixed`	по ширинам первой строки или элементов `col`; остаток делится поровну

С table-fixed ширину колонки задают на ячейке первой строки:

HTML

<table class="table table-fixed">
  <thead>
    <tr><th class="w-e0">Код</th><th>Описание</th><th class="w-f0">Статус</th></tr>
  </thead>
  …
</table>

table-fixed быстрее отрисовывает большие таблицы: браузеру не нужно читать все строки, чтобы узнать ширину колонок.

Ограничения

table-fixed действует, только если у таблицы задана ширина; класс table задаёт width: 100%.
Длинное слово без пробелов в узкой колонке table-fixed выходит за ячейку; добавьте ей перенос слов.
Префиксов ширины экрана и состояния нет.

Навигация

Главное

Документация

Содержание