Membuat Table Responsive Di Postingan Blog AMP HTML

Tutorial saya sebelumnya, sebenarnya adalah cara untuk membuat table responsive ala bootstrap dengan jquery. Namun kemarin ada sahabat blogcozone yang memerlukan sebuah table untuk postingan blog AMP HTML, dan masih kebingungan untuk memodifikasinya agar valid AMP HTML.

Nah, sekarang ini saya akan memodifikasi table responsive ala bootstrap dengan jquery tersebut lebih agar tampak sederhana dan agar valid AMP. Dan sebenarnya table responsive ini tidak hanya bisa digunakan untuk AMP saja, namun bisa juga digunakan untuk blog Non AMP.

Untuk penampakannya kalian bisa melihat di iframe JSfiddle di bawah ini. Untuk melihat responsivenya silahkan kalian akses halaman ini dengan smartphone Anda dan cek table-nya.

Langkah Cara Membuat Table Responsive Di Postingan Blog AMP

Silahkan kalian pergi ke blog kalian, kemudian cari Tema dan Edit HTML lalu kemudian simpan CSS berikut di atas </style> blog kalian.

.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 kalian gunakan HTML tabel seperti berikut ini dalam mode Tampilan 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 kalian sesuaikan dengan keperluan untuk mengatur letak header table.

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