Examples

Collapsing table borders

Use the border-collapse utility to combine adjacent cell borders into a single border when possible:

Note that this includes collapsing borders on the top-level <table> tag.

Separating table borders

Use the border-separate utility to force each cell to display its own separate borders:

Responsive design

Prefix a border-collapse utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<table class="border-collapse md:border-separate ...">
  <!-- ... -->
</table>

Learn more about using variants in the variants documentation.