Membuat Table Responsive Di Postingan Blog AMP HTML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/13/2017

Sebenarnya ini adalah dari tutorial saya sebelumnya untuk membuat table responsive ala bootstrap dengan jquery. Namun kemarin ada sahabat Kompi yang memerlukan sebuah table untuk postingan blog AMP HTML, dan masih kebingungan untuk memodifikasinya agar valid AMP HTML.

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

Dan sebenarnya table responsive ini tidak hanya untuk AMP saja, namun bisa juga digunakan untuk blog Non AMP.

Untuk penampakannya bisa dilihat di iframe JSfiddle di bawah ini. Untuk melihat responsivenya silahkan akses 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 seperti 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 kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.

Keterangan:

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