CSS "डिस्प्ले: टेबल-कॉलम" कैसे काम करने वाला है?

Question 1

निम्नलिखित एचटीएमएल और सीएसएस को देखते हुए, मैं अपने ब्राउज़र में बिल्कुल कुछ भी नहीं देखता हूं (लेखन के समय क्रोम और आईई नवीनतम)। सब कुछ 0x0 px तक ढह जाता है। क्यों?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        section { display: table; height: 100%; background-color: grey; }

        #colLeft { display: table-column; height: 100%; background-color: green; }
        #colRight { display: table-column; height: 100%; background-color: red; }

        #row1 { display: table-row; height: 100%; }
        #row2 { display: table-row; height: 100%; }
        #row3 { display: table-row; height: 100%; }

        #cell1 { display: table-cell; height: 100%; }
        #cell2 { display: table-cell; height: 100%; }
        #cell3 { display: table-cell; height: 100%; }
    </style>
</head>
<body>
    <section>
        <div id="colLeft">
            <div id="row1">
                <div id="cell1">
                    AAA
                </div>
            </div>
            <div id="row2">
                <div id="cell2">
                    BBB
                </div>
            </div>
        </div>
        <div id="colRight">
            <div id="row3">
                <div id="cell3">
                    CCC
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Question 2

CSS टेबल मॉडल HTML टेबल मॉडल http://www.w3.org/TR/CSS21/tables.html पर आधारित है

एक तालिका को ROWS में विभाजित किया गया है, और प्रत्येक पंक्ति में एक या अधिक सेल हैं। कोशिकाएं ROWS के बच्चे हैं, वे स्तंभों के बच्चे हैं।

"प्रदर्शन: टेबल-कॉलम" स्तंभ लेआउट बनाने के लिए एक तंत्र प्रदान नहीं करता है (उदाहरण के लिए कई स्तंभों के साथ अखबार के पृष्ठ, जहां सामग्री एक स्तंभ से अगले तक प्रवाह कर सकती है)।

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

तालिका को हमेशा उसी तरह संरचित किया जाता है जिस तरह से यह HTML में है।

HTML में (निरीक्षण करें कि "td" s "tr" s के अंदर हैं, "col" s के अंदर नहीं):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

सीएसएस तालिका गुणों का उपयोग करके HTML के अनुरूप (ध्यान दें कि "कॉलम" divs में कोई सामग्री नहीं है - मानक सीधे स्तंभों में सामग्री की अनुमति नहीं देता है):

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

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>

स्निपेट का विस्तार करें

वैकल्पिक : "पंक्ति" और "कॉलम" दोनों को प्रत्येक पंक्ति और सेल के लिए कई वर्गों को निम्नानुसार स्टाइल करके देखा जा सकता है। यह दृष्टिकोण स्टाइल के विभिन्न सेटों, या अलग-अलग कोशिकाओं को निर्दिष्ट करने में अधिकतम लचीलापन देता है:

//Useful css declarations, depending on what you want to affect, include:

/* all cells (that have "class=mycell") */
.mycell {
}

/* class row1, wherever it is used */
.row1 {
}

/* all the cells of row1 (if you've put "class=mycell" on each cell) */
.row1 .mycell {
}

/* cell1 of row1 */
.row1 .cell1 {
}

/* cell1 of all rows */
.cell1 {
}

/* row1 inside class mytable (so can have different tables with different styles) */
.mytable .row1 {
}

/* all the cells of row1 of a mytable */
.mytable .row1 .mycell {
}

/* cell1 of row1 of a mytable */
.mytable .row1 .cell1 {
}

/* cell1 of all rows of a mytable */
.mytable .cell1 {
}

<div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow row1">
    <div class="mycell cell1">contents of first cell in row 1</div>
    <div class="mycell cell2">contents of second cell in row 1</div>
  </div>
  <div class="myrow row2">
    <div class="mycell cell1">contents of first cell in row 2</div>
    <div class="mycell cell2">contents of second cell in row 2</div>
  </div>
</div>

स्निपेट का विस्तार करें

आज के लचीले डिजाइनों में, जो <div>कई उद्देश्यों के लिए उपयोग करते हैं, प्रत्येक डिवीजन पर कुछ वर्ग रखना बुद्धिमानी है , ताकि इसे संदर्भित किया जा सके। यहाँ, <tr>HTML में क्या हुआ करता था class myrow, और <td>बन गया class mycell। यह कन्वेंशन वही है जो उपरोक्त CSS चयनकर्ताओं को उपयोगी बनाता है।

प्रदर्शन नोट : प्रत्येक सेल पर वर्ग के नाम डालना, और उपरोक्त मल्टी-क्लास चयनकर्ताओं का उपयोग करना *, जैसे .row1 *या यहां तक कि चयनकर्ताओं का उपयोग करने से बेहतर प्रदर्शन है .row1 > *। कारण यह है कि चयनकर्ताओं का मिलान पहले किया जाता है , इसलिए जब मिलान करने वाले तत्वों की तलाश की जा रही है, तो .row1 *पहले करता है *, जो सभी तत्वों से मेल खाता है, और फिर प्रत्येक तत्व के सभी पूर्वजों की जांच करता है , ताकि यह पता चल सके कि कोई पूर्वज है या नहीं class row1। यह एक जटिल दस्तावेज़ में धीमी डिवाइस पर धीमा हो सकता है। .row1 > *बेहतर है, क्योंकि केवल तत्काल माता-पिता की जांच की जाती है। लेकिन यह अभी भी ज्यादातर तत्वों को तुरंत खत्म करना बेहतर है .row1 .cell1। (.row1 > .cell1यहां तक कि एक तंग युक्ति है, लेकिन यह खोज का पहला चरण है जो सबसे बड़ा अंतर बनाता है, इसलिए यह आमतौर पर अव्यवस्था के लायक नहीं है, और अतिरिक्त विचार प्रक्रिया यह है कि क्या यह हमेशा एक सीधा बच्चा होगा, जोड़ने का बच्चा चयनकर्ता >।)

फिर से प्रदर्शन लेने के लिए महत्वपूर्ण बिंदु यह है कि एक चयनकर्ता में अंतिम आइटम जितना संभव हो उतना विशिष्ट होना चाहिए, और कभी नहीं होना चाहिए *।

Question 3

"टेबल-कॉलम" प्रदर्शन प्रकार का अर्थ है कि यह <col>HTML में टैग की तरह काम करता है - अर्थात एक अदृश्य तत्व जिसकी चौड़ाई * संलग्न तालिका के संबंधित भौतिक कॉलम की चौड़ाई को नियंत्रित करती है।

CSS तालिका मॉडल के बारे में अधिक जानकारी के लिए W3C मानक देखें ।

* और कुछ अन्य गुण जैसे बॉर्डर, बैकग्राउंड।