Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Tables

JSX style props for styling table elements.

Border Spacing

Control the border-spacing property of a table. This property applies only when border-collapse is set to separate.

<chakra.table borderSpacing="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
PropCSS PropertyToken Category
borderSpacingborder-spacingspacing

Border Spacing X

Use the borderSpacingX prop to set the horizontal border-spacing property of a table. This requires the borderSpacing prop to be set to auto.

<chakra.table borderSpacing="auto" borderSpacingX="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
PropCSS PropertyToken Category
borderSpacingXborder-spacingspacing

Border Spacing Y

Use the borderSpacingY prop to set the vertical border-spacing property of a table. This requires the borderSpacing prop to be set to auto.

<chakra.table borderSpacing="auto" borderSpacingY="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
PropCSS PropertyToken Category
borderSpacingYborder-spacingspacing

Caption Side

Use the captionSide prop to set the side of the caption of a table.

<table>
  <chakra.caption captionSide="bottom">This is a caption</chakra.caption>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>
PropCSS PropertyToken Category
captionSidecaption-side-

Previous

SVG

Next

Transforms