Домашняя страница Tailwind CSS
  1. Таблицы
  2. Макет таблицы

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

Класс
Свойства
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 позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:table-fixed, чтобы применять утилиту table-fixed только при hover.

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

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

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

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:table-fixed, чтобы применить утилиту table-fixed только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.