表格

边框间距

控制表格的 border-spacing 属性。

<chakra.table borderSpacing="2">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>

属性	CSS 属性	Token 类别
borderSpacing	border-spacing	spacing

边框水平间距

使用 borderSpacingX 属性来设置表格的水平 border-spacing 属性。

<chakra.table borderSpacingX="2">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>

属性	CSS 属性	Token 类别
borderSpacingX	border-spacing	spacing

边框垂直间距

使用 borderSpacingY 属性来设置表格的垂直 border-spacing 属性。

<chakra.table borderSpacingY="2">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>

属性	CSS 属性	Token 类别
borderSpacingY	border-spacing	spacing

标题位置

使用 captionSide 属性来设置表格标题的位置。

<table>
  <chakra.caption captionSide="bottom">This is a caption</chakra.caption>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

属性	CSS 属性	Token 类别
captionSide	caption-side	-