1. Таблицы
  2. border-collapse

Таблицы

border-collapse

Утилиты для управления тем, должны ли границы таблицы объединяться или разделяться.

ClassStyles
border-collapse
border-collapse: collapse;
border-separate
border-collapse: separate;

Примеры

Объединение границ таблицы

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

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

Обратите внимание, что это включает объединение границ на корневом теге <table>.

Разделение границ таблицы

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

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

Адаптивный дизайн

Префикс a border-collapse утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков