Membuat Table yang Responsive

Cek Responsive code Table

Mungkin sebagian kita jarang memakai code table, jadinya lupa kalau ada style table yang tidak mengikuti Parent Element yang sudah responsive, contohnya seperti ini :

Table Tidak Responsive

Cara pengecekan, cukup kita tekan CTRL+SHIFT+M , secara otomatis browser akan membuka simulasi layar Handphone, atau kalau shortcut tidak berjalan, bisa juga melalui F12, lalu cari lambang Handphone yang ada di bagian atas tab.

CSS Responsive Table

Untuk membuatnya responsive ane coba jadikan lebar max 100%, tapi sayang hasilnya terkesan memaksakan ruang layar HP, solusinya ane buat CSS yang membagi table itu untuk setiap kolom menjadi satu kesatuan, hasilnya lumayan lebih rapi seperti ini:

CSS Table Responsive

CSS Table

@media screen and (max-width:490px){
    table, thead, tbody, th, td, tr {
        display: block;
        width:100% !important;
    }
    tr {
        border: 1px solid #5f90e9;
    }
    td {
        border-bottom: 1px dotted #ccc !important;
        padding: 5px;
        vertical-align: middle;
    }
}

Yups cuma gitu aja codenya, gak ada yang spesial, yang penting work-lah ya ^_^


Related Artikel Membuat Table yang Responsive

Tidak ada komentar: