Sifat border-collapse

Sifat border-collapse menyebabkan sempadan berganda antara sel td atau sel th jadual HTML (dan antara sempadan sel dan jadual itu sendiri) runtuh dan kelihatan seperti satu.

Sifat ini hanya digunakan untuk jadual dan untuk elemen dengan display dalam nilai table atau inline-table. Untuk elemen blok biasa, malangnya, ia tidak akan berfungsi. Perhatikan bahawa ia perlu digunakan untuk jadual, bukan untuk selnya.

Sintaks

pemilih {
	border-collapse: collapse | separate;
}

Nilai

Nilai	Keterangan
`collapse`	Sempadan berganda akan kelihatan seperti satu. Ada kesan sampingan: sifat `border-spacing` dan atribut `cellspacing` akan berhenti berfungsi.
`separate`	Setiap sel jadual akan mempunyai sempadannya sendiri (oleh itu di beberapa tempat sempadan akan berganda, jika jarak antara sel adalah sifar).

Nilai lalai: separate.

Contoh . Nilai separate

Sekarang dalam jadual semua sempadan adalah berganda (sempadan ditetapkan untuk kedua-dua sel dan jadual 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

Sekarang sempadan ditetapkan untuk sel, tetapi tidak ditetapkan untuk jadual itu sendiri. Di mana dua sel mempunyai sempadan bersama, - sempadan akan berganda, 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

Sekarang dalam jadual semua sempadan akan runtuh dan kelihatan 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;
}