Skip to content

Border Collapse

Controls the collapsing or separation of table borders.

Utility Properties
Failed to load data. Please try again later.

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 ta-c tc-indigo w-full">
<tr>
<td class="b-1 bc-indigo p-2">A</td>
<td class="b-1 bc-indigo p-2">B</td>
</tr>
<tr>
<td class="b-1 bc-indigo p-2">C</td>
<td class="b-1 bc-indigo 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 ta-c tc-indigo w-full">
<tr>
<td class="b-1 bc-indigo p-2">A</td>
<td class="b-1 bc-indigo p-2">B</td>
</tr>
<tr>
<td class="b-1 bc-indigo p-2">C</td>
<td class="b-1 bc-indigo 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:bs-*,md:bs-*, lg:bs-*, and xxl:bs-* 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:bs-* utility to override elements and change their values when hovering over them.

<div class="bs-s h:bc-c ..."></div>