border-collapse / 표의 테두리와 td의 테두리 사이의 간격 처리 속성

border-collapse : 표의 테두리와 td의 테두리 사이의 간격을 어떻게 처리할 지 정하는 속성이다. 속성값에는 기본값인 separate, collapse, inital, inherit이 있다.

 

border-collapse 속성값

separate : 표의 테두리와 td의 테두리 사이에 간격을 둔다. 이때, border-spacing 속성으로 간격의 크기를 나타낼 수 있다.

collapse : 표의 테두리와 td의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다.

inital : 기본값 설정

inherit : 부모 속성의 속성값을 상속받는다.

 

border-collapse 속성 예제

<style>
	table{
    		width: 100%;
        	border: 1px solid #111111;
        	text-align: center;
            	border-collapse: separate;
    	}
    	td{
    		border: 1px solid #111111
    	}
</style>

<h1>Separate 속성값</h1>
<table>
	<thead>
    		<tr>
        		<td>a</td>
            		<td>b</td>
            		<td>c</td>
        	</tr>
    	</thead>
    	<tbody>
    		<tr>
        		<td>aa</td>
            		<td>bb</td>
            		<td>cc</td>
       		</tr>
   	</tbody>
</table>

<style>
	table{
    		width: 100%;
        	border: 1px solid #111111;
        	text-align: center;
            	border-collapse: collapse;
    	}
    	td{
    		border: 1px solid #111111
    	}
</style>

<h1>Collapse 속성값</h1>
<table>
	<thead>
    		<tr>
        		<td>a</td>
            		<td>b</td>
            		<td>c</td>
        	</tr>
    	</thead>
    	<tbody>
    		<tr>
        		<td>aa</td>
            		<td>bb</td>
            		<td>cc</td>
       		</tr>
   	</tbody>
</table>