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

​

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

​

Свернуть

Используйте 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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:border-collapse to only apply the border-collapse utility on hover.

<table class="hover:border-collapse">
  <!-- ... -->
</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:border-collapse to apply the border-collapse utility at only medium screen sizes and above.

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

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