테이블
border-collapse
테이블 테두리가 겹치거나 분리되도록 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
예제
테이블 테두리 겹치기
border-collapse 유틸리티를 사용하면 인접한 셀의 테두리를 가능한 경우 하나의 테두리로 합칠 수 있습니다.
| 주 | 도시 |
|---|---|
| 인디애나 | 인디애나폴리스 |
| 오하이오 | 콜럼버스 |
| 미시간 | 디트로이트 |
<table class="border-collapse border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">주</th> <th class="border border-gray-300 ...">도시</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">인디애나</td> <td class="border border-gray-300 ...">인디애나폴리스</td> </tr> <tr> <td class="border border-gray-300 ...">오하이오</td> <td class="border border-gray-300 ...">콜럼버스</td> </tr> <tr> <td class="border border-gray-300 ...">미시간</td> <td class="border border-gray-300 ...">디트로이트</td> </tr> </tbody></table>이 기능은 최상위 <table> 태그의 테두리도 겹치게 합니다.
테이블 테두리 분리하기
각 셀의 테두리를 개별적으로 표시하려면 border-separate 유틸리티를 사용하세요:
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>반응형 디자인
접두사 a border-collapse 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
