คุณสมบัติ empty-cells

คุณสมบัติ empty-cells กำหนดให้เบราว์เซอร์ แสดงพื้นหลังและขอบของ เซลล์ td หรือ เซลล์ th ที่ว่างใน ตาราง HTML: ว่าจะแสดงหรือไม่

เซลล์จะถือว่าว่างในกรณีต่อไปนี้: ไม่มีอักขระใดๆ เลย, ในเซลล์มีเพียง ช่องว่าง (หนึ่งหรือหลายช่อง), การขึ้น บรรทัดใหม่ หรืออักขระแท็บ, หรือคุณสมบัติ visibility ถูกตั้งค่าเป็น hidden

เพื่อทำให้เซลล์ไม่ว่าง แต่ในขณะเดียวกัน ไม่มีข้อความที่มองเห็นได้ ใช้เทคนิค ดังนี้: ในเซลล์ให้ใส่ช่องว่างที่ไม่แตกบรรทัด  

คุณสมบัตินี้จะไม่ทำงาน หากกำหนด border-collapse เป็นค่า collapse

ไวยากรณ์

ตัวเลือก {
	empty-cells: show | hide;
}

ค่าต่างๆ

ค่า	คำอธิบาย
`show`	พื้นหลังและขอบจะแสดงสำหรับเซลล์ว่าง
`hide`	พื้นหลังและขอบจะไม่แสดงสำหรับเซลล์ว่าง

ค่าเริ่มต้น: show

ตัวอย่าง . ค่า show

ตอนนี้ในตารางมีบางเซลล์ที่ว่าง, แต่พวกมันยังคงมีขอบและพื้นหลัง:

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

ตัวอย่าง . ค่า hide

แต่ตอนนี้เซลล์ว่างจะไม่มี พื้นหลังและขอบ:

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

ดูเพิ่มเติม

คลาสเทียม empty,
ซึ่งกำหนดว่าองค์ประกอบที่ว่างเปล่าจะมีลักษณะอย่างไร