border-collapse 속성의 이해

border-collapse 속성은
테이블(<table>, 표) 셀의 테두리(border)를 서로 합칠지, 분리할지를 지정합니다.

  • separate(분리된 테두리 표) - 테이블의 각 셀이 개별적으로 테두리를 유지하도록 분리해서 표시합니다. (초깃값)
  • collapse(상쇄된 테두리 표) - 테이블 셀 간의 테두리를 하나로 합쳐 표시합니다.

데모

다음의 CSS 데모로 border-collapse 속성의 사용 방법을 확인해 보세요.

CSS 데모: border-collapse 데모 버튼을 클릭해 보세요!

예제

HTML 
<table class="separate">
    <caption>
        <code>border-collapse: separate</code>
    </caption>
    <tr>
        <td>Cell 1.1</td>
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td>Cell 2.1</td>
        <td>Cell 2.2</td>
    </tr>
    <tr>
        <td>Cell 3.1</td>
        <td>Cell 3.2</td>
    </tr>
</table>
<table class="collapse">
    <caption>
        <code>border-collapse: collapse</code>
    </caption>
    <tr>
        <td>Cell 1.1</td>
        <td>Cell 1.2</td>
    </tr>
    <tr>
        <td>Cell 2.1</td>
        <td>Cell 2.2</td>
    </tr>
    <tr>
        <td>Cell 3.1</td>
        <td>Cell 3.2</td>
    </tr>
</table>
CSS 
.collapse {
    border-collapse: collapse;
}
.separate {
    border-collapse: separate;
}

table {
    display: inline-table;
    margin: 1em;
}
td {
    border: 3px solid;
    border-color: red blue orange green;
    padding: 0.5em 2em;
}
실제 적용된 모습

형식 구문

CSS 
/* 적용 요소: <table>
            (display 속성이 table 또는, inline-table로 설정되어 있는 요소) */
selector {
    border-collapse: seperate | collapse
}

구문

CSS 
/* 키워드 값 */
border-collapse: separate; /* 초깃값 */
border-collapse: collapse;

/* 전역 값 */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;

형식 정의

border-collapse 속성의 형식 정의
초깃값 separate
적용 요소 <table>
(display 속성이 table 또는, inline-table로 설정되어 있는 요소)
상속 예
애니메이션 아니오

값

border-collapse 속성의 값
separate 분리된 테두리 표로 설정합니다.
테이블의 각 셀이 개별적으로 테두리를 유지하도록 분리해서 표시합니다.
collapse 상쇄된 테두리 표로 설정합니다.
테이블 셀 간의 테두리를 하나로 합쳐 표시합니다.

border-collapse와 연관된 CSS 속성과 동작

border-collapse 속성은 테이블의 테두리 렌더링 방식을 변경하며, 여러 CSS 속성과 테이블 요소의 동작에 영향을 미칩니다.

border-collapse: separate에서만 적용되는 CSS 속성

다음의 속성들은 border-collapse: separate에서만 적용되고, border-collapse: collapse에서는 무시됩니다.

border-collapse: collapse에서만 적용되는 요소 경계 테두리(border) 설정

테이블과 관련된 다음의 요소들은 border-collapse: collapse에서만 요소의 테두리(border)와 관련된 속성들이 적용됩니다. border-collapse: separate에서는 무시됩니다.

테이블에서 border-collapse: collapse가 사용될 경우,
요소 경계 테두리(border)는 각 셀, 행, 행 그룹, 열, 열 그룹, 그리고 테이블 요소 자체에 설정될 수 있습니다.
이때, 요소 경계 테두리는 두께(border-width), 스타일(border-style), 색상(border-color)에 따라 다르게 설정될 수 있습니다.

규칙

border-collapse: collapse 설정으로 인해 인접한 요소 경계 테두리가 상쇄될 때, 어떤 경계 테두리가 선택될까요?

기본적으로 가장 눈에 띄는(eye-catching) 경계 테두리 스타일이 선택됩니다.

하지만, border-style: hidden이 포함될 경우, 해당 요소 경계 테두리는 무조건 표시되지 않습니다.

border-collapse: collapse가 적용될 경우, 인접한 요소 경계 테두리 간 상쇄 시 아래와 같은 규칙에 따라 어떤 테두리가 우선되는지 결정됩니다

  1. border-style: hidden이 최우선입니다. border-style: hidden은 해당 위치의 모든 다른 경계를 숨깁니다.
  2. border-style: none은 가장 낮은 우선순위를 가집니다. 모든 요소에서 border-style: none일 경우, 해당 경계는 표시되지 않습니다. [단, none은 border-style의 기본값(초깃값)입니다.]
  3. border-style: hidden과 border-style: none이 아닌 다른 border-style 값이 설정되어 있는 경우,
    좁은 경계의 두께(border-width)는 넓은 경계 두께(border-width)에 의해 상쇄됩니다.
  4. 여러 스타일(border-style)의 경계 두께(border-width)가 동일하다면, 다음 우선순위대로 결정됩니다.
    double > solid > dashed > dotted > ridge > outset > groove > inset
  5. 두께(border-width), 스타일(border-style)이 동일하지만 색상(border-color)만 다른 경우, 다음의 우선순위로 경계가 결정됩니다.
    • 셀 > 행 > 행 그룹 > 열 > 열 그룹 > 테이블
    • 같은 타입의 요소 경계 테두리간 상쇄 시, 왼쪽에 있는 요소(테이블의 방향이 ltr이면 오른쪽, rtl이면 오른쪽)와 위쪽에 있는 요소가 우선순위가 됩니다.
border-collapse 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
border-collapse 1 12 1 1.2
collapse 80 80 72 13.1
separate 80 80 72 13.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

border-collapse 속성의 명세서 사양
명세서 사양
border-collapse Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#propdef-border-collapse
Border conflict resolution Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#order-conflict-resolution

참고문헌

같이 보기