Границы вокруг ячеек

​

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

​

Свернуть

Используйте border-collapse, чтобы объединить границы смежных ячеек в единую границу, когда это возможно. Обратите внимание, что это включает сворачивание границ тега верхнего уровня <table>.

<table class="border-collapse border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">Штат</th>
      <th class="border border-slate-300 ...">Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Индиана</td>
      <td class="border border-slate-300 ...">Индианаполис</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Огайо</td>
      <td class="border border-slate-300 ...">Колумбус</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Мичиган</td>
      <td class="border border-slate-300 ...">Детройт</td>
    </tr>
  </tbody>
</table><table class="border-collapse border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">Штат</th>
      <th class="border border-slate-600 ...">Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Индиана</td>
      <td class="border border-slate-700 ...">Индианаполис</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Огайо</td>
      <td class="border border-slate-700 ...">Колумбус</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Мичиган</td>
      <td class="border border-slate-700 ...">Детройт</td>
    </tr>
  </tbody>
</table>

​

Разделить

Используйте border-separate, чтобы каждая ячейка отображала свои отдельные границы.

<table class="border-separate border border-slate-400 ...">
  <thead>
    <tr>
      <th class="border border-slate-300 ...">Штат</th>
      <th class="border border-slate-300 ...">Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-300 ...">Индиана</td>
      <td class="border border-slate-300 ...">Индианаполис</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Огайо</td>
      <td class="border border-slate-300 ...">Колумбус</td>
    </tr>
    <tr>
      <td class="border border-slate-300 ...">Мичиган</td>
      <td class="border border-slate-300 ...">Детройт</td>
    </tr>
  </tbody>
</table><table class="border-separate border border-slate-500 ...">
  <thead>
    <tr>
      <th class="border border-slate-600 ...">Штат</th>
      <th class="border border-slate-600 ...">Город</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-slate-700 ...">Индиана</td>
      <td class="border border-slate-700 ...">Индианаполис</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Огайо</td>
      <td class="border border-slate-700 ...">Колумбус</td>
    </tr>
    <tr>
      <td class="border border-slate-700 ...">Мичиган</td>
      <td class="border border-slate-700 ...">Детройт</td>
    </tr>
  </tbody>
</table>

​

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

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:border-collapse, чтобы применять утилиту border-collapse только при hover.

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

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

​

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

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

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

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