border-collapse

테이블의 인접한 셀 테두리를 합칠지 분리할지 결정하는 속성입니다. bcc가 가장 일반적이며, 깔끔한 테이블을 만들 때 필수입니다.

클래스 목록

클래스	CSS	설명
`bcc`	border-collapse: collapse	인접 셀 테두리를 합침. 가장 일반적인 테이블 스타일
`bcs`	border-collapse: separate	각 셀 테두리를 분리. border-spacing 사용 가능

시각적 비교

동일한 테이블에 bcc와 bcs를 각각 적용한 결과를 비교합니다.

collapse — bcc

이름	역할
Alice	Frontend
Bob	Backend
Carol	Design

인접 셀의 테두리가 하나로 합쳐짐. 깔끔한 라인

separate — bcs

이름	역할
Alice	Frontend
Bob	Backend
Carol	Design

각 셀의 테두리가 분리됨. 셀 사이에 간격 발생

언제 뭘 쓸까?

상황	추천	이유
일반 데이터 테이블	`bcc`	깔끔한 단일 테두리
셀 간 간격이 필요한 테이블	`bcs`	border-spacing으로 간격 조절 가능
셀에 border-radius 필요	`bcs`	collapse 모드에서는 셀 radius 무시
줄무늬(striped) 테이블	`bcc`	테두리 없이 배경색으로 구분

클래스별 상세

`bcc`border-collapse: collapse

인접한 셀의 테두리를 하나로 합칩니다. 가장 일반적인 테이블 스타일이며, 깔끔하고 모던한 테이블을 만들 때 사용합니다. border-spacing이 무시됩니다.

<!-- 기본 collapse 테이블 -->
<table class="w100p bcc fs14px">
  <thead>
    <tr>
      <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA">항목</th>
      <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA">값</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hover-bg18181B">
      <td class="py12px px16px bb1pxsolid27272A cFAFAFA">이름</td>
      <td class="py12px px16px bb1pxsolid27272A c71717A">Alice</td>
    </tr>
    <tr class="hover-bg18181B">
      <td class="py12px px16px bb1pxsolid27272A cFAFAFA">역할</td>
      <td class="py12px px16px bb1pxsolid27272A c71717A">Frontend</td>
    </tr>
  </tbody>
</table>

자주 쓰는 조합

`w100p bcc fs14px`	전체 너비 + collapse + 기본 폰트 (가장 일반적)
`bcc bb1pxsolid...`	collapse + 하단 테두리만 (모던 스타일)
`bcc tlf`	collapse + 고정 레이아웃 (균등 열 너비)

`bcs`border-collapse: separate

각 셀의 테두리를 개별적으로 유지합니다. 기본값이며, border-spacing으로 셀 간격을 조절할 수 있습니다. 셀에 border-radius를 적용하려면 separate 모드여야 합니다.

<!-- separate 테이블 + border-spacing -->
<table class="w100p bcs bs8px fs14px">
  <thead>
    <tr>
      <th class="tal py12px px16px bg18181B b1pxsolid27272A br4px cA1A1AA">항목</th>
      <th class="tal py12px px16px bg18181B b1pxsolid27272A br4px cA1A1AA">값</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="py12px px16px b1pxsolid27272A br4px cFAFAFA">이름</td>
      <td class="py12px px16px b1pxsolid27272A br4px c71717A">Bob</td>
    </tr>
    <tr>
      <td class="py12px px16px b1pxsolid27272A br4px cFAFAFA">역할</td>
      <td class="py12px px16px b1pxsolid27272A br4px c71717A">Backend</td>
    </tr>
  </tbody>
</table>

border-radius와 함께 사용

bcc 모드에서는 셀에 border-radius가 적용되지 않습니다. 셀에 둥근 모서리가 필요하면 bcs를 사용하세요.

팁 & 주의사항

대부분의 경우 bcc를 사용

모던 웹에서 테이블은 거의 항상 bcc를 사용합니다. 셀 사이 이중 테두리가 없어 깔끔하고, 구현이 간단합니다.

bcc에서는 border-spacing 무시

bcc 모드에서 border-spacing은 적용되지 않습니다. 셀 간격이 필요하면 bcs로 전환하세요.

table 요소에만 적용

border-collapse는 table 또는 dt(display: table) 요소에만 적용됩니다. 일반 div에는 효과가 없습니다.

border border-width border-radius table-layout