Cara membuat flat table responsive di blogger atau blogspot

Table sulit untuk dibuat responsive, tetapi bisa diakali dengan memanfaatkan query media dan overflow. Dengan memanfaatkan query media dan overflow saya akan mencoba menerangkan langkah demi langkah bagaimana cara membuat flat table responsive di blogger atau blogspot.

Seperti yang sudah kita tahu table bisa sangat luas. Sederet data row bisa bersama sama untuk masuk ke dalam sebuah table. Table dengan width 100%, bisa dikecilkan dan dibesarkan tetapi ketika layar di kecilkan row table akan terlihat sempit dan mungkin teks akan bertumpuk tumpuk. Inilah sebabnya kenapa table sulit dibuat responsive.

Desain responsif adalah tentang bagaimana kita menyesuaikan desain dengan layar yang memiliki ukuran berbeda. Jadi disini ketika website dibuka pada layar yang lebih sempit semisal ponsel makan table akan tetap terlihat lebih lebar dan kita bisa menggeser table ke arah samping. Sehingga layout design responsive tidak rusak dan kita bisa membaca table dengan lebih mudah.

Lalu apakah ini bisa diterapkan pada blogger? Bisa. Disini saya akan memandu anda dalam membuat table yang responsive dengan warna metro dan desain flat tanpa border.

Berikut adalah langkah langkah cara membuat flat table responsive di blogger atau blogspot:
1. Lagi lagi saya ingatkan untuk membackup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Silahkan anda masukkan responsive meta tag terlebih dahulu di blog anda. Taruh kode <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> setalah kode <head>.

4. Langkah selanjutnya adalah, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

Kode diatas adalah menggunakan media screen max-width: 767px. Maka ketika lebar maksimal layar 767px maka lebar table akan tetep dan akan ada scroll dibawah table.

5. Berikut adalah contoh penggunakan flat responsive table pada HTML atau postingan anda. Perlu diingat jika ingin dimasukkan pada template blogger maka gunakan single quote(') dan jika ingin dimasukkan pada postingan gunakan double quote("), berikut adalah kodenya:

<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>Nama Pertama</th> 
    <th>Nama Terakhir</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>Gian</td> 
    <td>MR</td>  
  </tr>
  <tr> 
    <td>Kaka</td> 
    <td>Slank</td> 
  </tr>
  <tr> 
    <td>John</td> 
    <td>Lennon</td> 
  </tr>
</tbody> 
</table>
</div>