border-collapse

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border-collapse 는 table 요소의 인접한 셀의 테두리 표시 방법을 지정합니다.

예제 1
border-collapse 개요
보기
border-collapse : collapse

border-collapse : separate

지정하지 않음 (기본값 : separate)
소스
<style type="text/css">
    .css_test {
        border-radius : 10px;
        border-spacing : 0;
        border : 6px solid silver;
        margin-top : 15px;
    }
    .css_test td {
        border : 1px solid black;
        height : 80px;
        text-align : center;
        width : 80px;
    }
</style>

<table class="css_test" align="center" style="border-collapse:collapse;">
    <tr>
        <td><img src="http://superkts.com/img/css/huk.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird20.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird30.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird34.gif" /></td>
        <td><img src="http://superkts.com/img/css/dog021.gif" /></td>
    </tr>
</table>
border-collapse : collapse<br>
<br>
<table class="css_test" align="center" style="border-collapse:separate;">
    <tr>
        <td><img src="http://superkts.com/img/css/huk.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird20.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird30.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird34.gif" /></td>
        <td><img src="http://superkts.com/img/css/dog021.gif" /></td>
    </tr>
</table>
border-collapse : separate
<br><br>
<table class="css_test" align="center">
    <tr>
        <td><img src="http://superkts.com/img/css/huk.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird20.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird30.gif" /></td>
        <td><img src="http://superkts.com/img/css/bird34.gif" /></td>
        <td><img src="http://superkts.com/img/css/dog021.gif" /></td>
    </tr>
</table>
지정하지 않음 (기본값 : separate)
설명

- boborder-collapse : collapse 인접한 셀의 테두리의 겹치는 부분을 합쳐줍니다.
- border-collapse : separate 인접한 테두리를 합치지 않습니다. (기본값)

연구 1
실습 - 직접 비교하며 해보기
보기
border-width :
0
border-width : 0
border-spacing :
0
border-spacing : 0
border-collapse : collapse


border-collapse : separate
설명

- 검은색 테두리는 table 요소의 셀 즉 td 의 테두리 입니다. 그리고 회색은 table 의 테두리.
- border-collapse : collapse (테두리 합침) 일때는 border-spacing 이 무시됩니다.

- 참고 : border-width border-spacing

+ 관련 CSS +