Svojstvo border-collapse

Svojstvo border-collapse uzrokuje da se dvostruke granice između ćelija td ili ćelija th HTML tabele (i između granice ćelije i same tabele) spoje i izgledaju kao jedna.

Ovo svojstvo se primenjuje samo za tabele i za elemente sa display u vrednosti table ili inline-table. Za obične blok elemente ono, na veliku žalost, neće raditi. Imajte u vidu da se primenjuje na tabelu, a ne na njene ćelije.

Sintaksa

selektor {
	border-collapse: collapse | separate;
}

Vrednosti

Vrednost	Opis
`collapse`	Dvostruke granice će izgledati kao jedna. Postoje nuspojave: prestaće da radi svojstvo `border-spacing` i atribut `cellspacing`.
`separate`	Svaka ćelija tabele će imati svoju granicu (zato će na nekim mestima granice biti dvostruke, ako je razmak između ćelija nula).

Podrazumevana vrednost: separate.

Primer . Vrednost separate

Sada su u tabeli sve granice dvostruke (granica je postavljena i ćelijama, i samoj tabeli):

<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;
}

Primer . Vrednost separate

A sada je granica postavljena ćelijama, ali samoj tabeli nije postavljena. Tamo gde dve ćelije imaju zajedničku granicu, - granice će biti dvostruke, na ostalim mestima - jednostruke:

<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;
}

Primer . Vrednost collapse

Sada će se u tabeli sve granice spojiti i izgledaće debljine 1px, kao što je i želelo:

<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;
}