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>
Prop | CSS Property | Token Category |
---|---|---|
borderSpacing | border-spacing | spacing |
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>
Prop | CSS Property | Token Category |
---|---|---|
borderSpacingX | border-spacing | spacing |
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>
Prop | CSS Property | Token Category |
---|---|---|
borderSpacingY | border-spacing | spacing |
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>
Prop | CSS Property | Token Category |
---|---|---|
captionSide | caption-side | - |