MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

border-collapse

요약

border-collapse CSS 속성(property)은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.

분리(separated) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 border-spacing 속성에 의해 주어집니다.

상쇄(collapsed) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, insetborder-style 값은 groove처럼, outsetridge처럼 행동합니다.

초기값separate
적용대상table and inline-table elements
상속yes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

구문

border-collapse: collapse;
border-collapse: separate;

border-collapse: inherit;

separate
분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.
collapse
상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.

형식 구문

collapse | separate

자립형 예 보기

실제 예제 보기

브라우저 엔진의 다색 표

HTML

<table class="separate">
    <caption><code>border-collapse: separate</code></caption>
    <tbody>
        <tr><th>Browser</th> <th>Layout Engine</th>
        </tr>
        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
        </tr>
        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
        </tr>
        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
        </tr>
        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
        </tr>
        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
        </tr>
    </tbody>
</table>
<table class="collapse">
    <caption><code>border-collapse: collapse</code></caption>
    <tbody>
        <tr><th>Browser</th> <th>Layout Engine</th>
        </tr>
        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
        </tr>
        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
        </tr>
        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
        </tr>
        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
        </tr>
        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
        </tr>
    </tbody>
</table>

CSS

.collapse {
    border-collapse: collapse;
}
.separate {
    border-collapse: separate;
}
table {
    display: inline-table;
    margin: 1em;
    border: dashed 6px;
    border-width: 6px;
}
table th, table td {
    border: solid 3px;
}
.fx { border-color: orange blue; }
.gk { border-color: black red; }
.ie { border-color: blue gold; }
.tr { border-color: aqua; }
.sa { border-color: silver blue; }
.wk { border-color: gold blue; }
.ch { border-color: red yellow green blue; }
.bk { border-color: navy blue teal aqua; }
.op { border-color: red; }

결과

스펙

스펙 상태 설명
CSS Level 2 (Revision 1)
The definition of 'border-collapse' in that specification.
Recommendation 초기 정의

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.3 1.0 (1.9.2) 7.0 11 3.0

문서 태그 및 공헌자

 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,