테이블 스타일 프로퍼티

테이블 스타일 프로퍼티

테이블 요소를 스타일링할 때 쓸 수 있는 JSX 스타일 프로퍼티에 대해 알아봐요. 셀 간격이나 캡션 위치 같은 테이블 고유 속성을 손쉽게 제어할 수 있어요.

출처: 문서

본문

Border Spacing

테이블의 border-spacing 속성을 제어해요. 이 속성은 border-collapse가 separate로 설정된 경우에만 적용돼요.

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

Border Spacing X

borderSpacingX 프로퍼티로 테이블의 가로 border-spacing 속성을 설정해요. 이때 borderSpacing 프로퍼티가 auto로 설정되어 있어야 해요.

<chakra.table borderSpacing="auto" borderSpacingX="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>

Border Spacing Y

borderSpacingY 프로퍼티로 테이블의 세로 border-spacing 속성을 설정해요. 이때 borderSpacing 프로퍼티가 auto로 설정되어 있어야 해요.

<chakra.table borderSpacing="auto" borderSpacingY="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>

Caption Side

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>

더 알아보기 (Learn more)