Membuat Script Tabel Responsive Dengan CSS

Script Tabel Responsive Dengan CSS

Pada kali ini kita akan bahas gimana cara membuat tabel responsive dengan CSS 3. Ada dua cara untuk membuat tabel responsive dengan CSS yaitu (1) mengubah struktur tabel (2) menambahkan container pada tabel sehingga isi dari tabel tersebut dapat di scroll. Keduanya masing masing memiliki kelebihan dan kekurangan.

Berikut ini adalah Hasil nya yang akan kita buat:

Script Tabel Responsive Dengan CSS


<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 misalnya 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 adalah hasil Script Tabel Responsive Dengan CSS





Begitulah cara membuat Script Tabel Responsive Dengan CSS. Semoga bisa dipelajari dan bisa bermanfaat.