Check out our free templates made with AI and polished to perfection in Windframe
Get nowTailwind Border Collapse
The tailwind border collapse utility class in Tailwind CSS allows you to control the collapsing behavior of borders in a table.
Tailwind Border Collapse
The tailwind border collapse utility class in Tailwind CSS allows you to control the collapsing behavior of borders in a table. With Tailwind's border collapse class, you can easily adjust whether the borders should collapse or separate between table cells.
How to apply Tailwind Border Collapse
To apply the tailwind border collapse behavior to a table, you can use the border-collapse-{value}
utility class, where {value}
represents the desired behavior. Here are the available options:
border-collapse
: Borders collapse between table cells (default).border-separate
: Borders are separate between table cells.
<table class="border-collapse"> <!-- Table content here --></table>
Preview
Country | Capital |
---|---|
USA | Washington, D.C. |
Australia | Canberra |
China | Beijing |
If you want to keep the borders separate between table cells, you can use the border-separate
class:
<table class="border-separate"> <!-- Table content here --></table>
Preview
Country | Capital |
---|---|
USA | Washington, D.C. |
Australia | Canberra |
China | Beijing |
Responsive Tailwind Border Collapse
Tailwind CSS allows you to apply the border collapse class responsively at different breakpoints. To use responsive tailwind border collapse classes, you can append the breakpoint prefix to the utility class. For example, md:border-separate
applies the separate border collapse behavior starting from the medium breakpoint and above.
<table class="border-collapse md:border-separate"> <!-- Table content here --></table>
In the above example, the table has the default border collapse behavior by default (border-collapse)
, but starting from the medium breakpoint and above, the separate border collapse behavior is applied (md:border-separate)
.
Interaction State Use (hover/focus)
These utilities are rarely paired with hover/focus, but you can apply them dynamically if needed:
<table class="border-separate hover:border-collapse"> ...</table>
This could be used for interactive tables that change layout style on hover.
Arbitrary Value Usage
border-collapse itself doesn’t accept arbitrary values (since it’s limited to collapse | separate). But you often combine it with arbitrary spacing values for border-spacing:
<table class="border-separate [border-spacing:12px]"> ...</table>
This sets custom spacing between table cells.
Customization in tailwind.config.js
You don’t typically extend borderCollapse since the property only supports collapse and separate. However, you can customize border spacing defaults in your theme:
// tailwind.config.jsmodule.exports = { theme: { extend: { borderSpacing: { 13: "3.25rem", 18: "4.5rem", }, }, },};
Usage:
Real UI Component Examples
Pricing Table with Separated Borders
<table class="border-separate border-spacing-4 w-full text-left"> <thead> <tr> <th class="border-b-2 border-gray-400 p-3">Plan</th> <th class="border-b-2 border-gray-400 p-3">Price</th> <th class="border-b-2 border-gray-400 p-3">Features</th> </tr> </thead> <tbody> <tr class="bg-gray-50"> <td class="border border-gray-300 p-3 rounded-lg">Basic</td> <td class="border border-gray-300 p-3">$9</td> <td class="border border-gray-300 p-3">3 projects</td> </tr> <tr> <td class="border border-gray-300 p-3">Pro</td> <td class="border border-gray-300 p-3">$29</td> <td class="border border-gray-300 p-3">Unlimited projects</td> </tr> </tbody></table>
Preview
Plan | Price | Features |
---|---|---|
Basic | $9 | 3 projects |
Pro | $29 | Unlimited projects |
Best Practices for Devs/Designers
-
Use
border-collapse
for compact data tables (finance, logs). -
Use
border-separate
with spacing for design-heavy or UI-focused tables (pricing, feature comparison). -
Combine border-separate with
rounded-lg
for modern card-like table cells. -
Be mindful: collapsed tables often look cleaner, but separated ones give breathing room.
Tailwind Border Collapse Class Table
Class | Properties |
---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
✨ What's Next?
Now that you’ve mastered Tailwind Border Collapse, try experimenting with:
Windframe Tailwind blocks
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
