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