# border-collapse

> Applies `border-collapse`.

```ts
import { borderCollapse } from "@sdxc/u/layout";
```

Applies `border-collapse`. Defaults to `"collapse"`, the common case of a
table whose cell borders should merge into single lines instead of
doubling up.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.borderCollapse()` | `css({ borderCollapse: "collapse" })` |
| `u.borderCollapse("separate")` | `css({ borderCollapse: "separate" })` |

## Examples

### Basic example

Use `borderCollapse()` to merge the borders of adjacent table cells into single lines:

```tsx
<table
	mix={[
		borderCollapse(),
		text("sm"),
		where("th, td", [p(2, 4), 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>
```

### Separating borders

Use `borderCollapse("separate")` to give every cell its own border, spaced apart by `borderSpacing()`:

```tsx
<table
	mix={[
		borderCollapse("separate"),
		borderSpacing("0.25rem"),
		text("sm"),
		where("th, td", [p(2, 4), 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.

```ts
u.hover(u.borderCollapse())
```

## Responsive design

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

```ts
u.at("md", u.borderCollapse())
```

## Signature

```ts
u.borderCollapse(value?: BorderCollapseValue)
```