Bagaimana seharusnya CSS "display: table-column" bekerja?

Question 1

Mengingat HTML dan CSS berikut, saya sama sekali tidak melihat apa pun di browser saya (Chrome dan IE terbaru pada saat penulisan). Semuanya diciutkan hingga 0x0 piksel. Mengapa?

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

Model tabel CSS didasarkan pada model tabel HTML http://www.w3.org/TR/CSS21/tables.html

Tabel dibagi menjadi BARIS, dan setiap baris berisi satu atau beberapa sel. Sel adalah anak dari ROWS, mereka TIDAK PERNAH merupakan anak dari kolom.

"display: table-column" TIDAK menyediakan mekanisme untuk membuat tata letak kolom (misalnya halaman surat kabar dengan banyak kolom, di mana konten dapat mengalir dari satu kolom ke kolom berikutnya).

Sebaliknya, "table-column" HANYA menetapkan atribut yang berlaku untuk sel yang sesuai dalam baris tabel. Misalnya, "Warna latar belakang sel pertama di setiap baris adalah hijau" dapat dijelaskan.

Tabel itu sendiri selalu terstruktur dengan cara yang sama seperti di HTML.

Dalam HTML (perhatikan bahwa "td" ada di dalam "tr", BUKAN di dalam "col"):

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

HTML yang sesuai menggunakan properti tabel CSS (Perhatikan bahwa div "kolom" tidak berisi konten apa pun - standar tidak mengizinkan konten langsung di kolom):

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

Luaskan cuplikan

OPSIONAL : "baris" dan "kolom" dapat diberi gaya dengan menetapkan beberapa kelas ke setiap baris dan sel sebagai berikut. Pendekatan ini memberikan fleksibilitas maksimum dalam menentukan berbagai set sel, atau sel individu, yang akan diberi gaya:

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

Luaskan cuplikan

Dalam desain fleksibel saat ini, yang digunakan <div>untuk berbagai tujuan, adalah bijaksana untuk menempatkan beberapa kelas pada setiap div, untuk membantu merujuknya. Di sini, apa yang dulu ada <tr>di HTML menjadi class myrow, dan <td>menjadi class mycell. Konvensi inilah yang membuat pemilih CSS di atas berguna.

CATATAN KINERJA : menempatkan nama kelas pada setiap sel, dan menggunakan penyeleksi kelas jamak di atas, adalah kinerja yang lebih baik daripada menggunakan selektor yang diakhiri dengan *, seperti .row1 *atau bahkan .row1 > *. Alasannya adalah bahwa penyeleksi dicocokkan terlebih dahulu , jadi ketika elemen yang cocok sedang dicari, .row1 *pertama lakukan *, yang cocok dengan semua elemen, dan kemudian memeriksa semua leluhur setiap elemen , untuk menemukan apakah ada leluhur yang memilikinya class row1. Ini mungkin lambat dalam dokumen kompleks pada perangkat lambat..row1 > *lebih baik, karena hanya orang tua langsung yang diperiksa. Tetapi jauh lebih baik lagi untuk segera menghilangkan sebagian besar elemen, melalui .row1 .cell1. (.row1 > .cell1adalah spesifikasi yang lebih ketat, tetapi ini adalah langkah pertama dari pencarian yang membuat perbedaan terbesar, jadi biasanya tidak sepadan dengan kekacauan, dan proses pemikiran ekstra, apakah itu akan selalu menjadi anak langsung, untuk menambahkan pemilih anak >.)

Poin kunci untuk menghilangkan kinerja adalah bahwa item terakhir dalam pemilih harus sespesifik mungkin , dan tidak boleh *.

Question 3

Jenis tampilan "tabel-kolom" berarti berfungsi seperti <col>tag dalam HTML - yaitu elemen tak terlihat yang lebarnya * mengatur lebar kolom fisik yang sesuai dari tabel yang melingkupinya.

Lihat standar W3C untuk informasi lebih lanjut tentang model tabel CSS.

* Dan beberapa properti lain seperti perbatasan, latar belakang.