[ @sdxc/u/layout ]

border-spacing

Applies the border-spacing property — the gap between adjacent table cell borders when border-collapse: separate is in effect (its default).

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { borderSpacing } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.borderSpacing("0.5rem")`	`css({ borderSpacing: "0.5rem" })`
`u.borderSpacing("0.5rem 1rem")`	`css({ borderSpacing: "0.5rem 1rem" })`

Examples

Basic example

Use borderSpacing(length) to set the space between the borders of adjacent table cells:

Package	Subpath
@sdxc/u	layout
@sdxc/u	color

<table
	mix={[
		borderSpacing("0.5rem"),
		text("sm"),
		where("th, td", [
			p(2, 4),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]),
	]}
>
	<thead>
		<tr>
			<th>Package</th>
			<th>Subpath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@sdxc/u</td>
			<td>layout</td>
		</tr>
		<tr>
			<td>@sdxc/u</td>
			<td>color</td>
		</tr>
	</tbody>
</table>

Spacing each axis

Pass two lengths, like borderSpacing("1.5rem 0.25rem"), to space columns apart by the first and rows by the second:

Package	Subpath
@sdxc/u	layout
@sdxc/u	color

<table
	mix={[
		borderSpacing("1.5rem 0.25rem"),
		text("sm"),
		where("th, td", [
			p(2, 4),
			rounded("md"),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]),
	]}
>
	<thead>
		<tr>
			<th>Package</th>
			<th>Subpath</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>@sdxc/u</td>
			<td>layout</td>
		</tr>
		<tr>
			<td>@sdxc/u</td>
			<td>color</td>
		</tr>
	</tbody>
</table>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.borderSpacing("0.5rem"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.borderSpacing("0.5rem"))

Signature

u.borderSpacing(value: string)