邊框合併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:2x">    <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:separate@sm border-collapse:collapse@print">...</table>