border-collapse
Setting whether table cells have shared or separate borders.
Overview
| Class | Declarations |
|---|---|
border-collapse:collapse | border-collapse: collapse;
|
border-collapse:separate | border-collapse: separate;
|
border-collapse:<value> | border-collapse: <value>;
|
Examples
Collapse table borders
Adjacent cells share a single border in the collapsed model. This complete table supplies its own 2px cell borders; the shared edge stays 2px.
<!-- Collapse · one shared edge --><table id="target" class="w:240px max-w:100% border-collapse:collapse border-spacing:0 font-sm text-left text-body table-layout:fixed"> <caption class="pb-sm font-semibold text-left"> Project assets </caption> <tbody> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Design </th> <td class="p-xs b:2px|solid|var(--color-blue)">12 files</td> </tr> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Research </th> <td class="p-xs b:2px|solid|var(--color-blue)">8 files</td> </tr> </tbody></table>Generated CSS
@layer utilities { .border-collapse\:collapse { border-collapse: collapse }}Conflicting borders are resolved by the native table rules. A hidden border suppresses a shared edge; none has the lowest priority.
Separate table borders
Separate mode gives every cell its own border box. With zero spacing, two neighboring 2px borders meet as a 4px seam.
<!-- Separate · two touching edges --><table id="target" class="w:240px max-w:100% border-collapse:separate border-spacing:0 font-sm text-left text-body table-layout:fixed"> <caption class="pb-sm font-semibold text-left"> Project assets </caption> <tbody> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Design </th> <td class="p-xs b:2px|solid|var(--color-blue)">12 files</td> </tr> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Research </th> <td class="p-xs b:2px|solid|var(--color-blue)">8 files</td> </tr> </tbody></table>Unlike collapsed borders, these edges are painted independently. Use spacing to leave a visible gap between the boxes.
Match border spacing to the mode
Compare the same border-spacing-xs in both modes. The token resolves to 8px here, but only the separate model uses the gap.
<!-- Collapse · spacing ignored --><table id="target" class="w:240px max-w:100% border-collapse:collapse border-spacing-xs font-sm text-left text-body table-layout:fixed"> <caption class="pb-sm font-semibold text-left"> Project assets </caption> <tbody> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Design </th> <td class="p-xs b:2px|solid|var(--color-blue)">12 files</td> </tr> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Research </th> <td class="p-xs b:2px|solid|var(--color-blue)">8 files</td> </tr> </tbody></table><!-- Separate · 8px spacing --><table id="target" class="w:240px max-w:100% border-collapse:separate border-spacing-xs font-sm text-left text-body table-layout:fixed"> <caption class="pb-sm font-semibold text-left"> Project assets </caption> <tbody> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Design </th> <td class="p-xs b:2px|solid|var(--color-blue)">12 files</td> </tr> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Research </th> <td class="p-xs b:2px|solid|var(--color-blue)">8 files</td> </tr> </tbody></table>The computed spacing can remain 8px even when collapse makes it ineffective. Inspect the actual space between cells, not just the readout.
Apply conditionally
Widen the preview to sm to give cells separate borders and 8px gaps. Print always returns to collapsed borders.
<!-- Collapse → separate at sm --><table id="target" class="w:240px max-w:100% border-collapse:collapse border-spacing-xs font-sm text-left text-body table-layout:fixed border-collapse:collapse@print border-collapse:separate@screen@sm"> <caption class="pb-sm font-semibold text-left"> Project assets </caption> <tbody> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Design </th> <td class="p-xs b:2px|solid|var(--color-blue)">12 files</td> </tr> <tr> <th scope="row" class="p-xs b:2px|solid|var(--color-blue) font-medium"> Research </th> <td class="p-xs b:2px|solid|var(--color-blue)">8 files</td> </tr> </tbody></table>This is a real table in a resizable iframe. The screen qualification keeps the responsive rule from overriding print.