Border Spacing

Control spacing between table borders

Syntax

layout="border-spacing:[value]"

Values

Value	CSS Output	Description
border-spacing	border-spacing: {value}	All spacing
border-spacing-x	border-spacing: {value} 0	Horizontal spacing
border-spacing-y	border-spacing: 0 {value}	Vertical spacing

Examples

<table layout="border-separate border-spacing:small">Spaced</table>

Preview

Border Spacing

layout="border-spacing:small" - Space between table cell borders

A1	A2
B1	B2

View Code

<table layout="border:separate" style="width: 100%; border-spacing: 8px;">
  <tbody>
    <tr>
      <td space="p:small" visual="bg:primary text:white rounded:small">A1</td>
      <td space="p:small" visual="bg:primary text:white rounded:small">A2</td>
    </tr>
    <tr>
      <td space="p:small" visual="bg:primary text:white rounded:small">B1</td>
      <td space="p:small" visual="bg:primary text:white rounded:small">B2</td>
    </tr>
  </tbody>
</table>

Arbitrary Values

Supports custom values using bracket syntax:

<div layout="border:[custom-value]">Custom</div>