Border Collapse
Controls the collapsing or separation of table borders.
Utility | Properties |
---|---|
Error: 429 |
Collapse
This example sets the border collapse to collapse. The borders of the table will be merged together.
A | B |
C | D |
<table class="b-1 bc-indigo bc-c b-s ta-c tc-indigo w-full"> <tr> <td class="b-1 bc-indigo b-s p-2">A</td> <td class="b-1 bc-indigo b-s p-2">B</td> </tr> <tr> <td class="b-1 bc-indigo b-s p-2">C</td> <td class="b-1 bc-indigo b-s p-2">D</td> </tr></table>
Separate
Initial value
This example sets the border collapse to separate. The borders of the table cells will remain distinct, allowing for spacing between them.
A | B |
C | D |
<table class="b-1 bc-indigo bc-s b-s ta-c tc-indigo w-full"> <tr> <td class="b-1 bc-indigo b-s p-2">A</td> <td class="b-1 bc-indigo b-s p-2">B</td> </tr> <tr> <td class="b-1 bc-indigo b-s p-2">C</td> <td class="b-1 bc-indigo b-s p-2">D</td> </tr></table>
Conditional styles
Learn how to override existing utilities based on the userโs screen size or other factors, such as hover states.
Media modifier
You can combine responsive breakpoints like sm:-*
,md:-*
, lg:-*
, and xxl:-*
allows targeting specific utilities in different viewports.
<div class="bs-s md:bc-c ..."></div>
Hover modifier
Alternatively, you can apply :hover
by using h:-*
utility to override elements and change their values when hovering over them.
<div class="bs-s h:bc-c ..."></div>