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

Справочник классов по умолчанию

Класс	Свойства
table-auto	table-layout: auto;
table-fixed	table-layout: fixed;

Авто

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

Заголовок	Автор	Просмотры
Введение в CSS	Адам	858
Длинный и извилистый тур по истории UI-фреймворков и инструментов и их влияния на дизайн	Адам	112
Введение в JavaScript	Крис	1,280

<table class="table-auto">
  <thead>
    <tr>
      <th>Заголовок</th>
      <th>Автор</th>
      <th>Просмотры</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Введение в CSS</td>
      <td>Адам</td>
      <td>858</td>
    </tr>
    <tr class="bg-emerald-200">
      <td>Длинный и извилистый тур по истории UI-фреймворков и инструментов и их влияния на дизайн</td>
      <td>Адам</td>
      <td>112</td>
    </tr>
    <tr>
      <td>Введение в JavaScript</td>
      <td>Крис</td>
      <td>1,280</td>
    </tr>
  </tbody>
</table>

Фиксированный

Используйте table-fixed, чтобы таблица игнорировала содержимое и использовала фиксированную ширину для столбцов. Ширина первой строки задает ширину столбца для всей таблицы.

Вы можете вручную установить ширину для некоторых столбцов, а остальная доступная ширина будет равномерно разделена между столбцами без явной ширины.

Заголовок	Автор	Просмотры
Введение в CSS	Адам	858
Длинный и извилистый тур по истории UI-фреймворков и инструментов и их влияния на дизайн	Адам	112
Введение в JavaScript	Крис	1,280

<table class="table-fixed">
  <thead>
    <tr>
      <th class="w-1/2 ...">Заголовок</th>
      <th class="w-1/4 ...">Автор</th>
      <th class="w-1/4 ...">Просмотры</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Введение в CSS</td>
      <td>Адам</td>
      <td>858</td>
    </tr>
    <tr class="bg-blue-200">
      <td>Длинный и извилистый тур по истории UI-фреймворков и инструментов и их влияния на дизайн</td>
      <td>Адам</td>
      <td>112</td>
    </tr>
    <tr>
      <td>Введение в JavaScript</td>
      <td>Крис</td>
      <td>1,280</td>
    </tr>
  </tbody>
</table>

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит table layout.

Вы можете контролировать, какие варианты создаются для утилит table layout для изменения свойства tableLayout в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       tableLayout: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения table layout, Вы можете полностью отключить их, установив для tableLayout свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     tableLayout: false,
    }
  }