Bolehkah saya Mencipta Jadual Menggunakan Hanya `` dan CSS?

Buat Jadual Menggunakan Hanya <div> dan CSS

Pernyataan Masalah:

Mencipta jadual menggunakan elemen jadual HTML tradisional () boleh menyusahkan. Bolehkah struktur jadual yang setara dicapai menggunakan hanya <div> dan CSS?

Sampel Jadual:

Jadual contoh berikut disediakan:

<div>

<div>

CSS Penggayaan:

Kod CSS berikut ialah disediakan:

.divTable
{

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}

.divRow
{

display: table-row;
width: auto;

}

.divCell
{

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Sokongan untuk IE7 dan Di Bawah:

Kod yang disediakan tidak serasi dengan versi IE7 dan ke bawah kerana penggunaan paparan: jadual.

Penyelesaian Alternatif:

Untuk menangani isu keserasian, kod CSS berikut boleh digunakan:

.div-table {

display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */

}
.div-table-row {

display: table-row;
width: auto;
clear: both;

}
.div-table-col {

float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;

}

Faedah:

Kod CSS alternatif ini menyediakan keserasian IE7 dan ke bawah sambil mengekalkan struktur seperti jadual yang diingini.

Atas ialah kandungan terperinci Bolehkah saya Mencipta Jadual Menggunakan Hanya `` dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!