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

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

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

Isu terkini