Các empty-cellsbất động sản trong các tế bào bảng trống CSS Selects với mục đích xác định có hay không để hiển thị đường viền và nền trên chúng. Nói cách khác, nó cho trình duyệt biết có nên vẽ đường viền xung quanh một ô trong bảng hay không hoặc điền vào nền khi ô đó không chứa nội dung. Nó giống như áp dụng một thuộc visibilitytính trên các ô của bảng trống.
table ( empty-cells: show; )Giá trị
Các empty-cellsbất động sản có hai giá trị chính:
show: hiển thị đường viền và nền trên ô trống.hide: không hiển thị đường viền hoặc nền trên ô trống.
Các giá trị chung sau đây cũng được chấp nhận:
inherit: kế thừa giá trị thuộc tính của phần tử cha.initial: sử dụng giá trị mặc định đã xác định cho thuộc tính.unset: đặt lại thuộc tính về giá trị kế thừa của nó.
Khi nào sử dụng nó
Đây là một thuộc tính thú vị vì nó cung cấp cho CSS khả năng kiểm tra đánh dấu HTML cho nội dung bên trong bảng và phản hồi tương ứng. Chúng ta thường không coi CSS là một ngôn ngữ động nhưng đây là một ví dụ mà nó đến khá gần.
Một trường hợp sử dụng tốt empty-cellscó thể là một tình huống mà bạn có thể không biết liệu một bảng có chứa các điểm dữ liệu trống hay không và bạn quyết định ẩn chúng. Các bảng từng là cách thức thực tế của bố cục trang web được xây dựng, vì vậy nó có thể là một công cụ hữu ích để hiển thị và ẩn các phần tử khi bảng được sử dụng để trình bày hoặc nơi các phần tử chứa thuộc display: tabletính.
Bản giới thiệu
Xem Pen mPLVzB của CSS-Tricks (@ css-trick) trên CodePen.
Có liên quan
displayvisibility:empty
Thêm thông tin
- Thông số CSS cấp 2
- Tham chiếu MDN
- Bản demo SitePoint trên CodePen
- Các lớp bảng và bản trình diễn minh bạch trên CodePen
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 1,0 | 1,2 | 1.1 | 4.0 | 8.0 | 1,0 | 3.1 |