Cara membuat: tabel berurutan

Cara membuat tabel berurutan

Cara menggunakan CSS float atur atribut untuk membangun tabel berurutan:

contoh

* {
  box-sizing: border-box;
}
/* Membuat layout dua kolom */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (membersihkan gelombang) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

cobalah sendiri

Cara menggunakan CSS flex atur atribut untuk membangun tabel berurutan:

contoh

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

cobalah sendiri

Perhatian:Flexbox tidak didukung di Internet Explorer 10 dan versi yang lebih awal. Apakah Anda mau float atau flex tergantung pada Anda. Namun, jika Anda perlu mendukung IE10 dan versi yang lebih awal, gunakan float.

Petunjuk:Untuk mendapatkan informasi lebih lanjut tentang modul Flexible Box Layout, baca panduan kami di Panduan CSS Flexbox.

Tambahkan kemampuan responsif

Pada contoh di atas akan terlihat kurang indah di perangkat bergerak, karena kedua kolom akan mengambil ruang terlalu banyak di halaman.

Untuk membuat tabel responsif, supaya berubah dari layout dua kolom menjadi layout lebar penuh di perangkat bergerak, tambahkan media query berikut:

contoh

/* Layout responsif - di layar dengan resolusi kurang dari 600 paksi, kedua kolom akan ditempatkan secara bergilir, bukan bersamaan */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

cobalah sendiri

halaman yang relevan

Panduan:CSS tabel

Panduan:CSS floating

Panduan:CSS Flexbox