Thuộc tính empty-cells

Thuộc tính empty-cells chỉ định cho trình duyệt cách hiển thị nền và đường viền của các ô td hoặc ô th trống trong bảng HTML: hiển thị hay không.

Một ô được coi là trống trong các trường hợp sau: không có bất kỳ ký tự nào, trong ô chỉ chứa dấu cách (một hoặc nhiều), ký tự xuống dòng hoặc tab, hoặc nếu thuộc tính visibility được đặt là hidden.

Để làm cho một ô không trống, nhưng đồng thời không có văn bản hiển thị, người ta sử dụng mẹo sau: đặt một khoảng trống không ngắt   vào ô.

Thuộc tính không hoạt động nếu border-collapse được đặt với giá trị collapse.

Cú pháp

bộ chọn {
	empty-cells: show | hide;
}

Giá trị

Giá trị	Mô tả
`show`	Nền và đường viền được hiển thị cho ô trống.
`hide`	Nền và đường viền không được hiển thị cho ô trống.

Giá trị mặc định: show.

Ví dụ . Giá trị show

Hiện tại trong bảng có một số ô trống, nhưng chúng vẫn có đường viền và nền:

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

Ví dụ . Giá trị hide

Còn bây giờ các ô trống sẽ không có nền và đường viền:

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

Xem thêm

giả lớp empty,
thiết lập giao diện cho phần tử trống