Membuat Script Tabel Responsive Dengan Css
Script Tabel Responsive Dengan CSS
Pada kali ini kita akan bahas gimana cara menciptakan tabel responsive dengan CSS 3. Ada dua cara untuk menciptakan tabel responsive dengan CSS yaitu (1) mengubah struktur tabel (2) menambahkan container pada tabel sehingga isi dari tabel tersebut sanggup di scroll. Keduanya masing masing mempunyai kelebihan dan kekurangan.Berikut ini yakni Hasil nya yang akan kita buat:
<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <style type="text/css"> body { font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui"; } /* Table */ table { margin: auto; font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui"; font-size: 12px; } .demo-table { border-collapse: collapse; font-size: 13px; } .demo-table th, .demo-table td { border-bottom: 1px solid #e1edff; border-left: 1px solid #e1edff; padding: 7px 17px; } .demo-table th, .demo-table td:last-child { border-right: 1px solid #e1edff; } .demo-table td:first-child { border-top: 1px solid #e1edff; } .demo-table td:last-child{ border-bottom: 0; } caption { caption-side: top; margin-bottom: 10px; } /* Table Header */ .demo-table thead th { background-color: #508abb; color: #FFFFFF; border-color: #6ea1cc !important; text-transform: uppercase; } /* Table Body */ .demo-table tbody td { color: #353535; } .demo-table tbody tr:nth-child(odd) td { background-color: #f4fbff; } .demo-table tbody tr:hover th, .demo-table tbody tr:hover td { background-color: #ffffa2; border-color: #ffff0f; transition: all .2s; } </style> </head> <body> <table class="demo-table responsive" > <caption class="title">Tabel Awal</caption> <thead> <tr> <th scope="col">Nama</th> <th scope="col">Alamat</th> <th scope="col">Telp</th> <th scope="col">Email</th> </tr> </thead> <tbody> <tr> <td data-header="Nama" class="title">Anton</td> <td data-header="Alamat" >Jakarta</td> <td data-header="Telp" >08562136x</td> <td data-header="Email" >anton@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Bryan</td> <td data-header="Alamat" >Surabaya</td> <td data-header="Telp" >08581234x</td> <td data-header="Email" >bryan@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Cherly</td> <td data-header="Alamat" >Semarang</td> <td data-header="Telp" >08121234x</td> <td data-header="Email" >cherly@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Dean</td> <td data-header="Alamat" >Makassar</td> <td data-header="Telp" >08111234x</td> <td data-header="Email" >dean@email.com</td> </tr> <tr> <td data-header="Nama" class="title">Esryl</td> <td data-header="Alamat" >Medan</td> <td data-header="Telp" >08131234x</td> <td data-header="Email" >esryl@email.com</td> </tr> </tbody> </table> </body> </html>
1. Membuat Tabel Responsive Dengan CSS 3 – Dengan Cara mengubah Tampilan Tabel
Menggunakan cara ini dimana nantinya tampilah dari halaman akan menyesuaikan dengan bentuk gadget yang di gunakan contohnya saja dengan bentuk Handphone , Tablet dan lain sebagainya.
Tabel Responsive Tanpa Elemen Header
Model pertama kita akan menyembunyikan header tabel <thead> dan hanya menampilkan isi dari tabel <tbody>. Sebagai tambahannya kita tambahkan pseudo elemen ::before yang berisi data header. Isi dari pseudo element tersebut diambil dari atribut data-header dari elemen <td> menggunakan script css content: attr(data-header)Berikut ini script Html nya:
<tr> <td data-header="Nama" class="title">mawar</td> <td data-header="Alamat" >Subang</td> <td data-header="Telp" >123456</td> <td data-header="Email" >mawar@email.com</td> </tr>
Berikut Script Css Responsive nya:
@media screen and (max-width: 520px) { table.responsive { width: 100%; } thead { display: none; } td { display: block; text-align: right; border-right: 1px solid #e1edff; } td::before { float: left; text-transform: uppercase; font-weight: bold; content: attr(data-header); } }
Dibawah ini yakni hasil Script Tabel Responsive Dengan CSS
Begitulah cara menciptakan Script Tabel Responsive Dengan CSS. Semoga sanggup dipelajari dan sanggup bermanfaat.
Sumber https://www.rajaromans.com/