border-collapse

border-collapse (테이블 테두리 병합)

테이블에서 인접한 셀들의 테두리를 하나로 합칠지, 각각 분리해서 보여줄지를 정하는 유틸리티예요.

출처: 문서

본문

ClassStyles

클래스	스타일
`border-collapse`	`border-collapse: collapse;`
`border-separate`	`border-collapse: separate;`

Examples

Collapsing table borders

border-collapse 유틸리티를 사용하면 가능한 경우 인접한 셀 테두리를 하나의 테두리로 합쳐요.

<table class="border-collapse 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>

참고로 이 방식은 최상위 <table> 태그의 테두리도 함께 병합한다는 점을 포함해요.

Separating table borders

border-separate 유틸리티를 사용하면 각 셀이 자신만의 별도 테두리를 표시하게 해요.

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

Responsive design

border-collapse 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<table class="border-collapse md:border-separate ...">
  <!-- ... -->
</table>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.