Таблицы
Утилиты для управления тем, должны ли границы таблицы объединяться или разделяться.
| 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>Подробнее об использовании вариантов читайте в документации по вариантам.