सीएसएस "डिस्प्ले: टेबल-कॉलम" को कैसे काम करना चाहिए?

HTML में, तालिकाओं में पंक्तियाँ होती हैं, प्रत्येक पंक्ति के साथ कोशिकाओं से युक्त. सीएसएस इस अवधारणा का विस्तार करता है, जिससे डिजाइनरों को विशिष्ट पंक्ति और स्तंभ लेआउट को परिभाषित करने की अनुमति मिलती है। जबकि "डिस्प्ले: टेबल-रो" और "डिस्प्ले: टेबल-सेल" सीधे हैं, "डिस्प्ले: टेबल-कॉलम" का अधिक सूक्ष्म उद्देश्य है।

"डिस्प्ले: टेबल-सेल" के कार्य को समझना column"

"डिस्प्ले: टेबल-रो" और "डिस्प्ले: टेबल-सेल" के विपरीत, "डिस्प्ले: टेबल-कॉलम" एक नई कॉलम संरचना स्थापित नहीं करता है। इसके बजाय, यह मौजूदा तालिका पंक्तियों के भीतर कोशिकाओं के लिए विशेषताएँ सेट करता है। उदाहरण के लिए, आप प्रत्येक पंक्ति में पहली सेल का पृष्ठभूमि रंग निर्दिष्ट कर सकते हैं।

HTML बनाम CSS तालिका संरचना

इस अवधारणा को समझने के लिए, निम्नलिखित HTML पर विचार करें तालिका:

  

    
Cell 1
    
Cell 2
  
  

    
Cell 3
    
Cell 4
  

एचटीएमएल संरचना के अनुरूप, निम्नलिखित सीएसएस लागू किया जा सकता है:

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

इस उदाहरण में, ".column1" और ".column2" divs सामग्री के लिए कंटेनर नहीं हैं। वे केवल तालिका पंक्तियों के भीतर कोशिकाओं के लिए विशेषताओं को परिभाषित करते हैं। , स्वयं कॉलम के लिए नहीं।

अंतर्निहित तालिका संरचना HTML के समान ही रहती है, जिसमें कोशिकाएँ किसके बच्चे हैं पंक्तियाँ।"डिस्प्ले: टेबल-कॉलम" मल्टी-कॉलम लेआउट के लिए एक तंत्र प्रदान नहीं करता है, जहां सामग्री कॉलम के बीच बहती है।