Η empty-cellsιδιότητα στο CSS επιλέγει κενά κελιά πίνακα με σκοπό να καθορίσει εάν θα εμφανίζονται περιγράμματα και φόντα σε αυτά. Με άλλα λόγια, λέει στο πρόγραμμα περιήγησης εάν θα σχεδιάσει ή όχι σύνορα γύρω από ένα κελί πίνακα ή θα συμπληρώσει το φόντο όταν αυτό το κελί δεν περιέχει περιεχόμενο. Είναι σαν να εφαρμόζετε μια visibilityιδιότητα σε κενά κελιά πίνακα.
table ( empty-cells: show; )Αξίες
Η empty-cellsιδιότητα έχει δύο κύριες τιμές:
show: εμφάνιση περιγράμματος και φόντου σε ένα κενό κελί.hide: δεν εμφανίζει περίγραμμα ή φόντο σε ένα κενό κελί.
Οι ακόλουθες καθολικές τιμές είναι επίσης αποδεκτές:
inherit: κληρονομήστε την τιμή ιδιότητας του γονικού στοιχείου.initial: χρησιμοποιήστε την καθορισμένη προεπιλεγμένη τιμή για την ιδιότητα.unset: επαναφέρετε την ιδιότητα στην κληρονομική τιμή της.
Πότε να το χρησιμοποιήσετε
Αυτή είναι μια ενδιαφέρουσα ιδιότητα, διότι δίνει στο CSS τη δυνατότητα να ελέγχει τη σήμανση HTML για περιεχόμενο μέσα σε έναν πίνακα και να ανταποκρίνεται ανάλογα. Συνήθως δεν θεωρούμε το CSS ως δυναμική γλώσσα, αλλά αυτό είναι ένα παράδειγμα όπου έρχεται πολύ κοντά.
Μια καλή περίπτωση χρήσης empty-cellsθα μπορούσε να είναι μια κατάσταση όπου ενδέχεται να μην γνωρίζετε εάν ένας πίνακας θα περιέχει ή δεν θα περιέχει κενά σημεία δεδομένων και αποφασίζετε να τα αποκρύψετε. Οι πίνακες αποτελούσαν την εκ των πραγμάτων διάταξη ιστοσελίδων, έτσι θα μπορούσε να είναι ένα χρήσιμο εργαλείο για την εμφάνιση και απόκρυψη στοιχείων όταν χρησιμοποιούνται πίνακες για παρουσίαση ή όπου τα στοιχεία περιέχουν την display: tableιδιότητα.
Διαδήλωση
Δείτε το στυλό mPLVzB από CSS-Tricks (@ css-tricks) στο CodePen.
Σχετιζομαι με
displayvisibility:empty
Περισσότερες πληροφορίες
- Προδιαγραφές CSS Level 2
- Αναφορά MDN
- Επίδειξη SitePoint στο CodePen
- Επίπεδα πινάκων και επίδειξη διαφάνειας στο CodePen
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |