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.
Applying 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)
.
Tailwind Border Collapse Class Table
Class | Properties |
---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
Windframe Tailwind blocks
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.