Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Membuat Struktur Seperti Jadual Menggunakan Hanya Div dan CSS?

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

Barbara Streisandasal: 2024-12-11 12:10:15707semak imbas

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>

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;
}

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!

css html for using table tr

Kenyataan：

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 sebelumnya：Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris dengan Menu Susun Menegak?Artikel seterusnya：Bagaimana untuk Mencipta Navbar Bootstrap 4 Dua Baris dengan Menu Susun Menegak?

Artikel berkaitan

Lihat lagi