Bir CSS "display: table-column" nasıl çalışır?

Question 1

Aşağıdaki HTML ve CSS göz önüne alındığında, tarayıcımda kesinlikle hiçbir şey görmüyorum (Chrome ve IE en son yazma sırasında). Her şey 0x0 piksele kadar daralır. Neden?

<!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 tablo modeli, http://www.w3.org/TR/CSS21/tables.html HTML tablo modeline dayanmaktadır.

Bir tablo SATIRLAR'a bölünür ve her satır bir veya daha fazla hücre içerir. Hücreler ROWS'un çocuklarıdır, ASLA sütunların çocukları değildir.

"display: table-column" sütunlu düzenler yapmak için bir mekanizma SAĞLAMAZ (örneğin, içeriğin bir sütundan diğerine akabildiği birden çok sütuna sahip gazete sayfaları).

Bunun yerine, "tablo-sütun" YALNIZCA bir tablonun satırları içindeki karşılık gelen hücrelere uygulanan öznitelikleri belirler. Örneğin, "Her satırdaki ilk hücrenin arka plan rengi yeşil" olarak tanımlanabilir.

Tablonun kendisi her zaman HTML'deki ile aynı şekilde yapılandırılmıştır.

HTML'de ("td" ler "tr" ler içinde, "sütun" lar içinde DEĞİLDİR):

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

CSS tablo özelliklerini kullanarak karşılık gelen HTML ("sütun" div'lerinin herhangi bir içerik içermediğine dikkat edin - standart, doğrudan sütunlardaki içeriğe izin vermez):

.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>

Snippet'i genişlet

İSTEĞE BAĞLI : hem "satırlar" hem de "sütunlar", her satıra ve hücreye aşağıdaki gibi birden çok sınıf atanarak şekillendirilebilir. Bu yaklaşım, stil uygulanacak çeşitli hücre kümelerini veya tek tek hücreleri belirlemede maksimum esneklik sağlar:

//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>

Snippet'i genişlet

Kullanmak bugünün esnek tasarımlar, içinde <div>farklı amaçlar için, bu koymak için akıllıca olacaktır bazı başvurmak yardımına, her div class. Burada eskiden <tr>HTML'de olan şey oldu class myrowve <td>oldu class mycell. Bu kural, yukarıdaki CSS seçicilerini yararlı kılan şeydir.

PERFORMANS NOTU : Her hücreye sınıf adları koymak ve yukarıdaki çok sınıflı seçicileri kullanmak *, .row1 *veya hatta ile biten seçicileri kullanmaktan daha iyi performans gösterir .row1 > *. Bunun nedeni, seçicilerin en son eşleştirilmesidir , bu nedenle eşleşen öğeler aranırken .row1 *önce tüm öğelerle *eşleşir ve ardından herhangi bir atanın sahip olup olmadığını bulmak için her öğenin tüm atalarını kontrol eder . Bu, yavaş bir aygıtta karmaşık bir belgede yavaş olabilir. daha iyidir, çünkü yalnızca yakın ebeveyn incelenir. Ancak, çoğu öğeyi aracılığıyla hemen ortadan kaldırmak çok daha iyidir . (class row1.row1 > *.row1 .cell1.row1 > .cell1 eden daha sıkı bir özelliktir, ancak bu aramanın ilk adımıdır. bu en büyük farkı yaratır, bu nedenle genellikle karmaşaya değmez ve her zaman doğrudan bir çocuk olup olmayacağına dair ekstra düşünme sürecine çocuk seçiciyi> .)

Yeniden götürmek önemli nokta performansı olmasıdır geçen bir seçici içindeki madde olmalıdır mümkün olduğunca kesin ve olmamalıdır *.

Question 3

"Tablo-sütun" görüntüleme türü, bunun şu şekilde davrandığı anlamına gelir: <col> , HTML'deki etiket - yani genişliği *, çevreleyen tablonun karşılık gelen fiziksel sütununun genişliğini yöneten görünmez bir öğe.

CSS tablo modeli hakkında daha fazla bilgi için W3C standardına bakın .

* Ve kenarlıklar, arka planlar gibi diğer birkaç özellik.