Cara - Tabel Berdampingan
Pelajari cara membuat tabel berdampingan dengan CSS.
Cara Menempatkan Tabel Berdampingan
Cara membuat tabel berdampingan dengan float
properti CSS:
Contoh
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
Cara membuat tabel berdampingan dengan flex
properti CSS:
Contoh
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Catatan: Flexbox tidak didukung di Internet Explorer 10 dan versi yang lebih lama. Terserah Anda jika ingin menggunakan float atau flex. Namun, jika Anda membutuhkan dukungan untuk IE10 dan ke bawah, Anda harus menggunakan float.
Tip: Untuk mempelajari lebih lanjut tentang Modul Tata Letak Kotak Fleksibel, baca bab Flexbox CSS kami .
Tambahkan Responsivitas
Contoh di atas tidak akan terlihat bagus di perangkat seluler, karena dua kolom akan memakan terlalu banyak ruang halaman. Untuk membuat tabel responsif, yang seharusnya beralih dari tata letak dua kolom ke tata letak lebar penuh pada perangkat seluler, tambahkan kueri media berikut:
Contoh
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: Buka Tutorial Tabel CSS kami untuk mempelajari lebih lanjut tentang cara menata tabel.
Tip: Buka Tutorial Float CSS kami untuk mempelajari lebih lanjut tentang properti float.
Tip: Buka Tutorial CSS Flexbox kami untuk mempelajari lebih lanjut tentang properti flex.