Membuat Table Responsive Di Postingan Blog Amp Html

Sebenarnya ini yaitu dari tutorial aku sebelumnya untuk menciptakan table responsive ala bootstrap dengan jquery. Namun kemarin ada sobat Kompi yang memerlukan sebuah table untuk postingan blog AMP HTML, dan masih kebingungan untuk memodifikasinya semoga valid AMP HTML.

Nah pada tutorial kali ini, aku memodifikasi table responsive ala bootstrap dengan jquery tersebut lebih sederhana dan semoga valid AMP.

Dan bergotong-royong table responsive ini tidak hanya untuk AMP saja, namun dapat juga dipakai untuk blog Non AMP.

Untuk penampakannya dapat dilihat di iframe JSfiddle di bawah ini. Untuk melihat responsivenya silahkan susukan halaman ini dengan smartphone Anda dan cek table-nya.


Jika Anda memerlukan table responsive silahkan ikuti langkahnya di bawah ini.

Silahkan simpan CSS berikut di style edit HTML blog Anda.

 .table-responsive{min-height:.01%;overflow-x:auto}
 .table{width:100%;border-collapse:collapse;border-spacing:0}
 .table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}
 .table tr:nth-child(even) td{background-color:#F0F0E5}
 .table th{background-color:#EAE2CF;color:#333;font-size:110%}
 .table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
 .tg-bf{font-weight:700}
 .tg-it{font-style:italic}
 .tg-left{text-align:left}
 .tg-right{text-align:right}
 .tg-center{text-align:center}
 @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>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}
 }

Kemudian untuk menampilkan tabel responsive di postingan silahkan gunakan HTML tabel menyerupai berikut ini dalam mode editor HTML.

 <div class='table-responsive'>
   <table class="table">
     <tr>
       <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
     </tr>
     <tr>
       <td>Jenis Kamar</td>
       <td>Harga</td>
       <td>Jumlah Kamar</td>
       <td>Jumlah</td>
     </tr>
     <tr>
       <td>Ekonomi</td>
       <td>Rp. 150.000</td>
       <td>5 kamar</td>
       <td>Rp. 750.000</td>
     </tr>
     <tr>
       <td>Standar</td>
       <td>Rp. 200.000</td>
       <td>5 kamar</td>
       <td>Rp. 1.000.000</td>
     </tr>
     <tr>
       <td>Standar AC</td>
       <td>Rp. 300.000</td>
       <td>4 kamar</td>
       <td>Rp. 1.200.000</td>
     </tr>
     <tr>
       <td>VIP/Family</td>
       <td>Rp. 350.000</td>
       <td>1 kamar</td>
       <td>Rp. 350.000</td>
     </tr>
   </table>
 </div>

Untuk isyarat class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

Keterangan:

• tg-bf untuk abjad tebal
• tg-it untuk abjad miring
• tg-left untuk rata kiri
• tg-right untuk rata kanan
• tg-center untuk rata tengah

Sumber https://www.kompiajaib.com/

Share this post