Properti border-collapse

Properti border-collapse memaksa border ganda antara sel td atau sel th tabel HTML (dan antara border sel dengan tabel itu sendiri) menciut dan terlihat seperti satu.

Properti ini hanya diterapkan untuk tabel dan untuk elemen dengan display dalam nilai table atau inline-table. Untuk elemen blok biasa, sayangnya sekali, tidak akan bekerja. Perlu diingat, bahwa menerapkannya harus untuk tabel, bukan untuk selnya.

Sintaks

selector {
	border-collapse: collapse | separate;
}

Nilai

Nilai	Keterangan
`collapse`	Border ganda akan terlihat seperti satu. Ada efek samping: properti `border-spacing` dan atribut `cellspacing` akan berhenti bekerja.
`separate`	Setiap sel tabel akan memiliki bordernya sendiri (karena itu di beberapa tempat border akan menjadi ganda, jika jarak antar sel adalah nol).

Nilai default: separate.

Contoh . Nilai separate

Saat ini di tabel semua border adalah ganda (border diberikan baik ke sel maupun ke tabel itu sendiri):

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

Contoh . Nilai separate

Dan saat ini border diberikan ke sel, tetapi tabel itu sendiri tidak diberikan. Di mana dua sel memiliki border bersama, - border akan menjadi ganda, di tempat lain - tunggal:

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

Contoh . Nilai collapse

Saat ini di tabel semua border akan menciut dan terlihat setebal 1px, seperti yang diinginkan:

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