border-collapse 속성

border-collapse 속성은 td 셀들 간 또는 th 셀들 간의 HTML 테이블의 이중 테두리 (그리고 셀 테두리와 테이블 자체의 테두리 사이)를 병합하여 하나처럼 보이게 합니다.

이 속성은 테이블과 display 속성값이 table 또는 inline-table인 요소에만 적용됩니다. 일반적인 블록 요소에는, 아쉽게도, 작동하지 않습니다. 주의할 점은 셀이 아닌 테이블 자체에 적용해야 한다는 것입니다.

구문

선택자 {
	border-collapse: collapse | separate;
}

값

값	설명
`collapse`	이중 테두리가 하나로 보입니다. 부수적인 효과가 있습니다: `border-spacing` 속성과 `cellspacing` 속성이 작동하지 않게 됩니다.
`separate`	테이블의 각 셀이 자신의 테두리를 가집니다 (따라서 셀 사이의 간격이 0인 경우 일부 위치에서 테두리가 이중으로 보일 수 있습니다).

기본값: separate.

예제 . separate 값

현재 테이블의 모든 테두리는 이중입니다(테두리가 셀과 테이블 자체 모두에 설정됨):

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

예제 . separate 값

이제는 테두리가 셀에만 설정되고 테이블 자체에는 설정되지 않았습니다. 두 셀이 공통 테두리를 가지는 위치에서는 테두리가 이중이 되고, 다른 위치에서는 단일이 됩니다:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
}
td {
	border: 1px solid red;
	text-align: center;
}

예제 . collapse 값

이제 테이블의 모든 테두리가 병합되어 원하는 대로 1px 두께로 보입니다:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}