रिक्त-कोशिकाएँ - सीएसएस-ट्रिक्स

Anonim

empty-cellsचाहे या नहीं उन पर सीमाओं और पृष्ठभूमि प्रदर्शित करने के लिए निर्दिष्ट करने के प्रयोजन के लिए सीएसएस चयन खाली तालिका सेल में संपत्ति। दूसरे शब्दों में, यह ब्राउजर को बताता है कि टेबल सेल के आसपास की सीमाएँ खींचना है या नहीं या बैकग्राउंड को भरना जब उस सेल में कोई सामग्री न हो। यह visibilityखाली टेबल कोशिकाओं पर एक संपत्ति को लागू करने की तरह है।

table ( empty-cells: show; )

मूल्यों

empty-cellsसंपत्ति दो प्राथमिक मान होते हैं:

  • show: खाली कक्ष पर बॉर्डर और पृष्ठभूमि प्रदर्शित करें।
  • hide: खाली सेल पर बॉर्डर या बैकग्राउंड प्रदर्शित नहीं करता है।

निम्नलिखित वैश्विक मूल्य भी स्वीकार किए जाते हैं:

  • inherit: मूल तत्व का गुण मान प्राप्त करें।
  • initial: संपत्ति के लिए परिभाषित डिफ़ॉल्ट मान का उपयोग करें।
  • unset: संपत्ति को उसके विरासत के मूल्य पर रीसेट करें।

इसका उपयोग कब करें

यह एक दिलचस्प संपत्ति है क्योंकि यह सीएसएस को एक तालिका के अंदर सामग्री के लिए HTML मार्कअप की जांच करने की क्षमता देता है और तदनुसार प्रतिक्रिया करता है। हम सामान्यतः CSS को एक गतिशील भाषा के रूप में नहीं समझते हैं लेकिन यह एक उदाहरण है जहां यह बहुत करीब आता है।

के लिए एक अच्छा उपयोग मामला empty-cellsएक ऐसी स्थिति हो सकती है जहां आपको पता नहीं चल सकता है कि क्या तालिका में खाली डेटा बिंदु होंगे या नहीं और आप उन्हें छिपाने का निर्णय लेते हैं। टेबल्स का उपयोग डे-फैक्टो वेबपेज लेआउट के रूप में किया जाता था, इसलिए यह तत्वों को दिखाने और छिपाने के लिए एक उपयोगी उपकरण हो सकता है जब प्रस्तुति के लिए टेबल का उपयोग किया जाता है या जहां तत्वों में display: tableसंपत्ति होती है।

डेमो

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन mPLVzB देखें।

सम्बंधित

  • display
  • visibility
  • :empty

अधिक जानकारी

  • सीएसएस स्तर 2 कल्पना
  • एमडीएन संदर्भ
  • CodePen पर SitePoint डेमो
  • CodePen पर टेबल लेयर्स और ट्रांसपेरेंसी डेमो

ब्राउज़र का समर्थन

क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
1.0 1.2 १.१ 4.0 8.0 1.0 3.1