Border Collapse

Utilities for controlling whether table borders should collapse or be separated.

React propsCSS Properties
borderCollapse={keyword}border-collapse: {keyword};

Separate

Use borderCollapse="separate" to force each cell to display its own separate borders.

<x.table borderCollapse="separate" border borderColor="green-800"> <thead> <tr> <x.th border borderColor="green-600"> State </x.th> <x.th border borderColor="green-600"> City </x.th> </tr> </thead> <tbody> <tr> <x.td border borderColor="green-600"> Indiana </x.td> <x.td border borderColor="green-600"> Indianapolis </x.td> </tr> <tr> <x.td border borderColor="green-600"> Ohio </x.td> <x.td border borderColor="green-600"> Columbus </x.td> </tr> <tr> <x.td border borderColor="green-600"> Michigan </x.td> <x.td border borderColor="green-600"> Detroit </x.td> </tr> </tbody> </x.div>

Combine

Use borderCollapse="collapse" to combine adjacent cell borders into a single border when possible. Note that this includes collapsing borders on the top-level <table> tag.

<x.table borderCollapse="collapse" border borderColor="green-800"> <thead> <tr> <x.th border borderColor="green-600"> State </x.th> <x.th border borderColor="green-600"> City </x.th> </tr> </thead> <tbody> <tr> <x.td border borderColor="green-600"> Indiana </x.td> <x.td border borderColor="green-600"> Indianapolis </x.td> </tr> <tr> <x.td border borderColor="green-600"> Ohio </x.td> <x.td border borderColor="green-600"> Columbus </x.td> </tr> <tr> <x.td border borderColor="green-600"> Michigan </x.td> <x.td border borderColor="green-600"> Detroit </x.td> </tr> </tbody> </x.table>

Responsive

To control the border collapsing of an element at a specific breakpoint, use responsive object notation. For example, adding the property borderCollapse={{ md: "collapse" }} to an element would apply the borderCollapse="collapse" utility at medium screen sizes and above.

<x.table borderCollapse={{ md: 'collapse' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub