The empty-cellsproperti di CSS menyeleksi sel meja kosong untuk tujuan menentukan apakah atau tidak untuk menampilkan perbatasan dan latar belakang mereka. Dengan kata lain, ini memberi tahu browser apakah akan menggambar batas di sekitar sel tabel atau mengisi latar belakang saat sel tersebut tidak berisi konten. Ini seperti menerapkan visibilityproperti pada sel tabel kosong.
table ( empty-cells: show; )Nilai
The empty-cellsproperti memiliki dua nilai utama:
show: menampilkan perbatasan dan latar belakang pada sel kosong.hide: tidak menampilkan perbatasan atau latar belakang pada sel kosong.
Nilai global berikut juga diterima:
inherit: mewarisi nilai properti dari elemen induk.initial: gunakan nilai default yang ditentukan untuk properti.unset: setel ulang properti ke nilai yang diwariskan.
Kapan Menggunakannya
Ini adalah properti yang menarik karena memberikan CSS kemampuan untuk memeriksa markup HTML untuk konten di dalam tabel dan merespons sesuai. Kami biasanya tidak menganggap CSS sebagai bahasa dinamis tetapi ini adalah contoh yang cukup mendekati.
Kasus penggunaan yang baik empty-cellsbisa menjadi situasi di mana Anda mungkin tidak tahu apakah tabel akan atau tidak akan berisi titik data kosong dan Anda memutuskan untuk menyembunyikannya. Tabel dulunya adalah cara de-facto untuk membuat tata letak halaman web, sehingga ini bisa menjadi alat yang berguna untuk menampilkan dan menyembunyikan elemen saat tabel digunakan untuk presentasi atau di mana elemen berisi display: tableproperti.
Demo
Lihat Pen mPLVzB oleh CSS-Tricks (@ css-trick) di CodePen.
Terkait
displayvisibility:empty
Informasi Lebih Lanjut
- Spesifikasi CSS Level 2
- Referensi MDN
- Demo SitePoint di CodePen
- Lapisan tabel dan demo transparansi di CodePen
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |