border-collapse

Setting whether table cell have shared or separate borders.

Overview

Examples

Collapse table borders

Use border-collapse:collapse when adjacent table cell borders should merge into a single border.

<table class="border-collapse:collapse">  <tr><td>Cell</td></tr></table>

@layer utilities {  .border-collapse\:collapse {    border-collapse: collapse  }}

Separate table borders

Use border-collapse:separate when cells need their own border boxes and spacing.

<table class="border-collapse:separate">  <tr><td>Cell</td></tr></table>

Match border spacing to the mode

Collapsed borders ignore border-spacing. Use separate borders when spacing between cells is part of the design.

<table class="border-collapse:separate border-spacing:xs">  <tr><td>Cell</td></tr></table>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<table class="border-collapse:collapse border-collapse:collapse@print border-collapse:separate@sm">...</table>