Bagaimanakah Saya Boleh Membuat Struktur Seperti Jadual Menggunakan Hanya Div dan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Membuat Struktur Seperti Jadual Menggunakan Hanya Div dan CSS?

Barbara Streisand

Lepaskan： 2024-12-11 12:10:15

asal

654 orang telah melayarinya

How Can I Create a Table-Like Structure Using Only Divs and CSS?

Menggunakan

dan CSS untuk Mencipta Jadual

Anda boleh mencipta struktur seperti jadual menggunakan hanya

elemen dan sifat CSS. Begini cara anda boleh melakukannya:

Kod HTML:

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col">Customer ID</div>
    <div class="div-table-col">Customer Name</div>
    <div class="div-table-col">Customer Address</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">001</div>
    <div class="div-table-col">002</div>
    <div class="div-table-col">003</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">xxx</div>
    <div class="div-table-col">yyy</div>
    <div class="div-table-col">www</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">ttt</div>
    <div class="div-table-col">uuu</div>
    <div class="div-table-col">Mkkk</div>
  </div>
</div>

Salin selepas log masuk

Penggayaan CSS:

/* Table Container Styling*/
.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}

/* Table Rows Styling*/
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

/* Table Cells Styling*/
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-cell;
  width: 200px;
  background-color: #ccc;
}

Salin selepas log masuk

Oleh menggunakan gaya ini, anda boleh membuat susun atur jadual menggunakan hanya

elemen, tanpa memerlukan dan elemen. Hasilnya akan kelihatan serupa dengan jadual HTML tradisional, tetapi ia akan mempunyai reka letak yang fleksibel dan responsif.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Struktur Seperti Jadual Menggunakan Hanya Div dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris dengan Menu Susun Menegak? Artikel seterusnya：Bagaimanakah Saya Boleh Menukar Warna Peluru Senarai Tanpa Menjejaskan Kandungan Item Senarai?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2161

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2310

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1948

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...