Ιδιότητα empty-cells

Η ιδιότητα empty-cells καθορίζει πως το πρόγραμμα περιήγησης θα εμφανίζει το φόντο και τα σύνορα των κενών κελιών td ή κελιών th μιας HTML πίνακα: αν θα τα εμφανίζει ή όχι.

Ένα κελί θεωρείται κενό στις ακόλουθες περιπτώσεις: δεν υπάρχουν καθόλου χαρακτήρες, το κελί περιέχει μόνο κενό (ένα ή περισσότερα), αλλαγή γραμμής ή χαρακτήρα tab, ή εάν η ιδιότητα visibility ορίζεται ως hidden.

Για να κάνετε ένα κελί μη κενό, αλλά ταυτόχρονα χωρίς ορατό κείμενο, χρησιμοποιείται η ακόλουθη τεχνική: στο κελί εισάγεται ένα μη σπαστό κενό  .

Η ιδιότητα δεν λειτουργεί, εάν έχει οριστεί η border-collapse στην τιμή collapse.

Σύνταξη

επιλογέας {
	empty-cells: show | hide;
}

Τιμές

Τιμή	Περιγραφή
`show`	Το φόντο και τα σύνορα εμφανίζονται σε ένα κενό κελί.
`hide`	Το φόντο και τα σύνορα δεν εμφανίζονται σε ένα κενό κελί.

Προεπιλεγμένη τιμή: show.

Παράδειγμα . Τιμή show

Αυτήν τη στιγμή στον πίνακα μερικά κελιά είναι κενά, αλλά παρόλα αυτά έχουν σύνορα και φόντο:

<table>
	<tr>
		<td>κελί</td>
		<td></td>
		<td>κελί</td>
	</tr>
	<tr>
		<td></td>
		<td>κελί</td>
		<td></td>
	</tr>
	<tr>
		<td>κελί</td>
		<td>κελί</td>
		<td>κελί</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: show;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Παράδειγμα . Τιμή hide

Τώρα όμως τα κενά κελιά δεν θα έχουν φόντο και σύνορα:

<table>
	<tr>
		<td>κελί</td>
		<td></td>
		<td>κελί</td>
	</tr>
	<tr>
		<td></td>
		<td>κελί</td>
		<td></td>
	</tr>
	<tr>
		<td>κελί</td>
		<td>κελί</td>
		<td>κελί</td>
	</tr>
</table>

table {
	width: 400px;
	empty-cells: hide;
}
td {
	border: 1px solid black;
	background-color: #f3f3f3;
	text-align: center;
}

Δείτε επίσης

η ψευδοκλάση empty,
που ορίζει πως θα εμφανίζεται ένα κενό στοιχείο