Ιδιότητα border-collapse

Η ιδιότητα border-collapse αναγκάζει τα διπλά περιγράμματα μεταξύ των κελιών td ή των κελιών th ενός πίνακα HTML (και μεταξύ του περιγράμματος του κελιού και του ίδιου του πίνακα) να συμπτυχθούν και να εμφανίζονται ως ένα.

Αυτή η ιδιότητα εφαρμόζεται μόνο για πίνακες και για στοιχεία με display σε τιμή table ή inline-table. Για συνηθισμένα block στοιχεία, δυστυχώς, δεν θα λειτουργήσει. Λάβετε υπόψη ότι πρέπει να εφαρμοστεί στον πίνακα, και όχι στα κελιά του.

Σύνταξη

επιλογέας {
	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;
}