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.

<> <template preview> <x.table w={1} borderCollapse="separate" border borderColor="green-800" fontFamily="Flow" > <x.thead bg="emerald-200"> <tr> <x.th border borderColor="green-600" color="emerald-800" textAlign="left" px={4} py={2} > State </x.th> <x.th border borderColor="green-600" color="emerald-800" textAlign="left" px={4} py={2} > City </x.th> </tr> </x.thead> <tbody> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Indiana </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Indianapolis </x.td> </tr> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Ohio </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Columbus </x.td> </tr> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Michigan </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Detroit </x.td> </tr> </tbody> </x.table> </template> <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.

<> <template preview> <x.table w={1} borderCollapse="collapse" border borderColor="green-800" fontFamily="Flow" > <x.thead bg="emerald-200"> <tr> <x.th border borderColor="green-600" color="emerald-800" textAlign="left" px={4} py={2} > State </x.th> <x.th border borderColor="green-600" color="emerald-800" textAlign="left" px={4} py={2} > City </x.th> </tr> </x.thead> <tbody> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Indiana </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Indianapolis </x.td> </tr> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Ohio </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Columbus </x.td> </tr> <tr> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Michigan </x.td> <x.td border borderColor="green-600" color="emerald-400" px={4} py={2} > Detroit </x.td> </tr> </tbody> </x.table> </template> <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