表格

边框间距

¥Border Spacing

控制表格的 border-spacing 属性。此属性仅在 border-collapse 设置为 separate 时适用。

¥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>

属性	CSS 属性	标记类别
borderSpacing	border-spacing	spacing

边框间距 X

¥Border Spacing X

使用 borderSpacingX 属性设置表格的水平 border-spacing 属性。这需要将 borderSpacing 属性设置为 auto。

¥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>

属性	CSS 属性	标记类别
borderSpacingX	border-spacing	spacing

Y 边框间距

¥Border Spacing Y

使用 borderSpacingY 属性设置表格的垂直 border-spacing 属性。这需要将 borderSpacing 属性设置为 auto。

¥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>

属性	CSS 属性	标记类别
borderSpacingY	border-spacing	spacing

标题侧面

¥Caption Side

使用 captionSide 属性设置表格标题的侧面。

¥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>

属性	CSS 属性	标记类别
captionSide	caption-side	*