테이블
border-spacing
테이블 테두리 간격을 조절하는 유틸리티입니다.
| Class | Styles |
|---|---|
border-spacing-<number> | border-spacing: calc(var(--spacing) * <number>); |
border-spacing-(<custom-property>) | border-spacing: var(<custom-property>); |
border-spacing-[<value>] | border-spacing: <value>; |
border-spacing-x-<number> | border-spacing: calc(var(--spacing) * <number>) var(--tw-border-spacing-y); |
border-spacing-x-(<custom-property>) | border-spacing: var(<custom-property>) var(--tw-border-spacing-y); |
border-spacing-x-[<value>] | border-spacing: <value> var(--tw-border-spacing-y); |
border-spacing-y-<number> | border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number>); |
border-spacing-y-(<custom-property>) | border-spacing: var(--tw-border-spacing-x) var(<custom-property>); |
border-spacing-y-[<value>] | border-spacing: var(--tw-border-spacing-x) <value>; |
예제
기본 예제
분리된 테두리를 사용하는 테이블 셀 간의 간격을 조절하려면 border-spacing-2나 border-spacing-x-3 같은 border-spacing-<number> 유틸리티를 사용하세요.
| 주 | 도시 |
|---|---|
| 인디애나 | 인디애나폴리스 |
| 오하이오 | 콜럼버스 |
| 미시간 | 디트로이트 |
<table class="border-separate border-spacing-2 border border-gray-400 dark:border-gray-500"> <thead> <tr> <th class="border border-gray-300 dark:border-gray-600">주</th> <th class="border border-gray-300 dark:border-gray-600">도시</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 dark:border-gray-700">인디애나</td> <td class="border border-gray-300 dark:border-gray-700">인디애나폴리스</td> </tr> <tr> <td class="border border-gray-300 dark:border-gray-700">오하이오</td> <td class="border border-gray-300 dark:border-gray-700">콜럼버스</td> </tr> <tr> <td class="border border-gray-300 dark:border-gray-700">미시간</td> <td class="border border-gray-300 dark:border-gray-700">디트로이트</td> </tr> </tbody></table>커스텀 값 사용하기
border-spacing-[<value>] 구문을 사용하세요 border spacing를 완전히 커스텀한 값으로 설정하려면:
<table class="border-spacing-[7px] ..."> <!-- ... --></table>CSS 변수를 사용하려면 border-spacing-(<custom-property>) 구문을 사용할 수도 있습니다:
<table class="border-spacing-(--my-border-spacing) ..."> <!-- ... --></table>이는 border-spacing-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a border-spacing 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<table class="border-spacing-2 md:border-spacing-4 ..."> <!-- ... --></table>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스텀하기
border-spacing-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:
@theme { --spacing: 1px; }스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.
