[CSS] border-collapse

border-collapse

border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.

---

border-collapse

border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.

특징	설명
기본 값	border-collapse : separate
적용	table
버전	CSS1
시각적 표현	테이블 테투리 분리 및 합치기
사용성

정의(Definition)

• border-collapse 속성은 테이블의 분리 여부를 설정합니다.

테이블과 관련된 태그 및 속성(Table Related Tags and Property)

• <table> 태그는 표를 설정합니다.
• <caption> 태그는 표의 제목을 설정합니다.
• <thead> 태그는 표의 헤더 영역을 그룹화합니다.
• <tbody> 태그는 표의 본문 영역을 그룹화합니다.
• <tfoot> 태그는 표의 푸터 영역을 그룹화합니다.
• <tr> 태그는 표의 행을 설정합니다.
• <td> 태그는 표의 열(셀)을 설정합니다.
• <th> 태그는 행이나 열에 타이틀을 설정합니다.
• <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
• <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
• border-collapse 속성은 테이블의 테두리 분리 여부를 설정합니다.
• border-spacing 속성은 테이블의 테두리 간격을 설정합니다.

문법(Syntax)

border-collapse : separate | collapse

/* 기본 속성 */
border-collapse : separate; (기본값)
border-collapse : collapse;

속성(Property)

속성값	설명
separate	테이블 테두리를 분리합니다.
collapse	테이블 테두리 합칩니다.

예제1(Sample)

표 테두리를 설정하는 예제입니다.

표 제목 설정

표 제목1	표 제목2	표 제목3	표 제목4	표 제목5
표 내용1	표 내용1	표 내용1	표 내용1	표 내용1
표 내용2	표 내용2	표 내용2	표 내용2	표 내용2
표 내용3	표 내용3	표 내용3	표 내용3	표 내용3
표 내용4	표 내용4	표 내용4	표 내용4	표 내용4
표 내용5	표 내용5	표 내용5	표 내용5	표 내용5

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

HTML

CSS

SCRIPT

<table class="sample-table">
    <caption>표 제목 설정</caption>
    <thead>
        <tr>
            <th>표 제목1</th>
            <th>표 제목2</th>
            <th>표 제목3</th>
            <th>표 제목4</th>
            <th>표 제목5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
            <td>표 내용1</td>
        </tr>
        <tr>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
            <td>표 내용2</td>
        </tr>
        <tr>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
            <td>표 내용3</td>
        </tr>
        <tr>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
            <td>표 내용4</td>
        </tr>
        <tr>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
            <td>표 내용5</td>
        </tr>
    </tbody>
</table>

table th {
    border: 1px solid #ccc;
    padding: 10px;
    background: #ffdddd;
}
table td {
    border: 1px solid #ccc;
    padding: 10px;
    background: #deeeff;
}

//javascript none

호환성(Compatibility)

						6	7	8	9	10	11
border-collapse	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---