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.

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

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

Answer 3

Saya belum mencoba ini sendiri, tetapi saya telah melihat rekomendasi untuk tanalin.com/en/projects/display-table-htc yang merupakan solusi javascript untuk IE6 dan IE7. Saat javascript berjalan, itu mengubah halaman menjadi tag tabel HTML yang lebih lama.

ToolmakerSteve

Answer 4

Solusi berfungsi di IE8 +, Firefox, Chrome, iPad, Android. Ini adalah cara yang baik untuk menghindari tata letak tabel jika Anda memerlukan struktur tabel yang fleksibel dan Anda mendukung browser yang lebih modern yang tercantum di atas.

mbokil

Answer 5

yang <col style="color: red;" >tidak bekerja, tapi <col style="background-color: red;" >ok! ada apa dengan ini?

xgqfrms

Answer 6

@xgqfrms: Beberapa aturan css lainnya harus menimpa warna. Mungkin aturan diterapkan ke elemen di dalam sel Anda. Misalnya, jika teks Anda ada di dalam <p>, maka di suatu tempat Anda memiliki warna pengaturan aturan yang lebih spesifik <p>. Coba <col style="color: red !important;">. Jika ini berhasil, maka itulah masalahnya. Namun , jangan biasakan menggunakan secara berlebihan !important. Setelah melihat itu berfungsi, sebaiknya hapus, dan cari pemilih yang lebih spesifik untuk diutamakan. google "pemilih css yang lebih spesifik", atau lihat smashingmagazine.com/2007/07/…

ToolmakerSteve

Answer 7

23

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.

Acak832
sumber

2

Jika colelemen memiliki struktur logis, yang memang demikian, lalu bagaimana cara membenarkan menggunakan aturan CSS display: table-column;, yang hanya memiliki struktur presentasi? Menurut spesifikasi di display( w3.org/wiki/CSS/Properties/display ), itu seharusnya "berperilaku" seperti colelemen. Tapi saya tidak bisa melihat bagaimana itu berguna ...

chharvey

1

@ TestSubject528491 Karena Anda dapat mengatur latar belakang kolom, lebar kolom, dll, dari tabel [presentasi]. Tapi sebenarnya ini sangat berguna dalam hal menentukan aturan gaya default untuk <col>tag itu sendiri, atau tag yang setara dalam bahasa markup berbasis XML yang berbeda.

Random832

@chharvey: HTML coladalah elemen logis yang hanya berisi gaya presentasi . Anda tidak dapat memasukkan kolom info di dalamnya - ini adalah kesalahpahaman yang umum. Data tabel selalu dalam baris. display: table-column;mengubah elemen logika (biasanya a div) menjadi a col. Ini menyebabkan bidang gaya lain yang ditetapkan ke elemen tersebut diterapkan ke konsep presentasi "kolom". Hasilnya adalah elemen logika yang tidak ditampilkan dan yang isinya, jika ada, diabaikan; efek satu-satunya adalah menerapkan gaya ke "kolom" dari presentasi terkait. Lihat jawaban saya untuk template.

ToolmakerSteve

Answer 8

2

Jika colelemen memiliki struktur logis, yang memang demikian, lalu bagaimana cara membenarkan menggunakan aturan CSS display: table-column;, yang hanya memiliki struktur presentasi? Menurut spesifikasi di display( w3.org/wiki/CSS/Properties/display ), itu seharusnya "berperilaku" seperti colelemen. Tapi saya tidak bisa melihat bagaimana itu berguna ...

chharvey

Answer 9

1

@ TestSubject528491 Karena Anda dapat mengatur latar belakang kolom, lebar kolom, dll, dari tabel [presentasi]. Tapi sebenarnya ini sangat berguna dalam hal menentukan aturan gaya default untuk <col>tag itu sendiri, atau tag yang setara dalam bahasa markup berbasis XML yang berbeda.

Random832

Answer 10

@chharvey: HTML coladalah elemen logis yang hanya berisi gaya presentasi . Anda tidak dapat memasukkan kolom info di dalamnya - ini adalah kesalahpahaman yang umum. Data tabel selalu dalam baris. display: table-column;mengubah elemen logika (biasanya a div) menjadi a col. Ini menyebabkan bidang gaya lain yang ditetapkan ke elemen tersebut diterapkan ke konsep presentasi "kolom". Hasilnya adalah elemen logika yang tidak ditampilkan dan yang isinya, jika ada, diabaikan; efek satu-satunya adalah menerapkan gaya ke "kolom" dari presentasi terkait. Lihat jawaban saya untuk template.

ToolmakerSteve

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

Jawaban: