Својство border-collapse

Својство border-collapse присиљава двоструке ивице између ћелија td или ћелија th HTML табеле (и између ивице ћелије и саме табеле) да се споје и изгледају као једна.

Ово својство се примењује само за табеле и за елементе са display у вредности table или inline-table. За обичне блок елементе оно, на жалост, неће радити. Имајте у виду да га треба применити на табелу, а не на њене ћелије.

Синтакса

селектор {
	border-collapse: collapse | separate;
}

Вредности

Вредност	Опис
`collapse`	Двоструке ивице ће изгледати као једна. Постоје споредни ефекти: престаће да ради својство `border-spacing` и атрибут `cellspacing`.
`separate`	Свака ћелија табеле ће имати своју ивицу (због чега ће на неким местима ивице бити двоструке, ако је размак између ћелија нула).

Подразумевана вредност: 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;
}