Border Collapse

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

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

Use to force each cell to display its own separate borders.

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:border-collapse to apply the utility at only medium screen sizes and above.