Краткая справка

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

Основы использования

Авто

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

Песня Артист Год
The Sliding Mr. Bones (Next Stop, Pottersville) Malcolm Lockyer 1961
Witchy Woman The Eagles 1972
Shining Star Earth, Wind, and Fire 1975
<table class="table-auto">
  <thead>
    <tr>
      <th>Песня</th>
      <th>Артист</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

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

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

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

Песня Артист Год
The Sliding Mr. Bones (Next Stop, Pottersville) Malcolm Lockyer 1961
Witchy Woman The Eagles 1972
Shining Star Earth, Wind, and Fire 1975
<table class="table-fixed">
  <thead>
    <tr>
      <th>Песня</th>
      <th>Артист</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:table-fixed to only apply the table-fixed utility on hover.

<table class="hover:table-fixed">
  <!-- ... -->
</table>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:table-fixed to apply the table-fixed utility at only medium screen sizes and above.

<table class="md:table-fixed">
  <!-- ... -->
</table>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.