border-spacing
En esta página
| Clase | Propiedades CSS |
|---|---|
border-spacing-<number> |
border-spacing: calc(var(--spacing) * <number>); |
border-spacing-px |
border-spacing: 1px; |
border-spacing-(<custom-property>) |
border-spacing: var(<custom-property>); |
border-spacing-[<value>] |
border-spacing: <value>; |
border-spacing-x-<number> |
border-spacing: calc(var(--spacing) * <number>) var(--tw-border-spacing-y); |
border-spacing-x-px |
border-spacing: 1px var(--tw-border-spacing-y); |
border-spacing-x-(<custom-property>) |
border-spacing: var(<custom-property>) var(--tw-border-spacing-y); |
border-spacing-x-[<value>] |
border-spacing: <value> var(--tw-border-spacing-y); |
border-spacing-y-<number> |
border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>); |
border-spacing-y-px |
border-spacing: var(--tw-border-spacing-x) 1px; |
border-spacing-y-(<custom-property>) |
border-spacing: var(--tw-border-spacing-x) var(<custom-property>); |
border-spacing-y-[<value>] |
border-spacing: var(--tw-border-spacing-x) <value>; |
Examples#
Basic example#
Use border-spacing-<number> utilities like border-spacing-2 and border-spacing-x-3 to control the space between the borders of table cells with separate borders:
{
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<!-- [!code classes:border-spacing-2] -->
<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500">
<thead>
<tr>
<th class="border border-gray-300 dark:border-gray-600">State</th>
<th class="border border-gray-300 dark:border-gray-600">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 dark:border-gray-700">Indiana</td>
<td class="border border-gray-300 dark:border-gray-700">Indianapolis</td>
</tr>
<tr>
<td class="border border-gray-300 dark:border-gray-700">Ohio</td>
<td class="border border-gray-300 dark:border-gray-700">Columbus</td>
</tr>
<tr>
<td class="border border-gray-300 dark:border-gray-700">Michigan</td>
<td class="border border-gray-300 dark:border-gray-700">Detroit</td>
</tr>
</tbody>
</table>