Таблицы
Утилиты для управления тем, должны ли границы таблицы объединяться или разделяться.
Class | Styles |
---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
Используйте утилиту border-collapse
для объединения смежных границ ячеек в одну границу, где это возможно:
State | City |
---|---|
Indiana | Indianapolis |
Ohio | Columbus |
Michigan | Detroit |
<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>
Подробнее об использовании вариантов читайте в документации по вариантам.