Properti empty-cells

Properti empty-cells memberi tahu browser cara menampilkan latar belakang dan border sel td atau sel th tabel HTML: ditampilkan atau tidak.

Sebuah sel dianggap kosong dalam kasus berikut: tidak ada karakter sama sekali, sel hanya berisi spasi (satu atau beberapa), baris baru atau karakter tab, atau jika properti visibility diatur ke hidden.

Untuk membuat sel tidak kosong, tetapi tanpa teks yang terlihat, digunakan trik berikut: masukkan spasi non-breaking   ke dalam sel.

Properti tidak berfungsi jika border-collapse diatur ke nilai collapse.

Sintaks

selektor {
	empty-cells: show | hide;
}

Nilai

Nilai	Keterangan
`show`	Latar belakang dan border ditampilkan untuk sel kosong.
`hide`	Latar belakang dan border tidak ditampilkan untuk sel kosong.

Nilai default: show.

Contoh . Nilai show

Saat ini dalam tabel, beberapa sel kosong, tetapi mereka tetap memiliki border dan latar belakang:

<table>
	<tr>
		<td>cell</td>
		<td></td>
		<td>cell</td>
	</tr>
	<tr>
		<td></td>
		<td>cell</td>
		<td></td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

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

Contoh . Nilai hide

Dan sekarang sel kosong tidak akan memiliki latar belakang dan border:

<table>
	<tr>
		<td>cell</td>
		<td></td>
		<td>cell</td>
	</tr>
	<tr>
		<td></td>
		<td>cell</td>
		<td></td>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

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

Lihat juga

kelas semu empty,
yang mengatur tampilan elemen kosong