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