Cara Membuat Tabel Responsive yang Baik dan Benar di Blog Valid AMP

.rspv-tabel{
  overflow-x:auto;
}
.rspv-tabel thead tr,table tr:nth-child(2n){
  background:#ecf0f1;
}
.rspv-tabel table{
  width:100%;
  background:#f7f9fa;
  border-spacing:0;
  border-collapse:collapse;
  overflow:hidden;
}
.rspv-tabel table caption{
  font-size:18px;
  font-weight:bold;
  text-transform:uppercase;
  padding:10px 0;
}
.rspv-tabel table td,table th{
  padding:8px 10px;
  text-align:left;
  border:1px solid #dedede;
  font-family:sans-serif;
}
.rspv-tabel table tr:hover{
  background:#fff;
}
@media screen and (max-width:800px){
.rspv-tabel{
  overflow-y:hidden;
  -ms-overflow-style:-ms-autohiding-scrollbar;
}
.rspv-tabel table td,table th{
  white-space:nowrap;
}
}

Setelah itu klik Simpan, untuk menyimpan perubahan.

Untuk menampilkan tabel responsive di dalam postingan, simpan kode html tabel berikut ini dalam mode Edit HTML pada tempat mana saja di dalam artikel.

<div class="rspv-tabel">
<table>
  <caption>Daftar Nama Karyawan di IDNXMUS</caption>
  <thead>
     <tr>
       <th scope="col">No</th>
       <th scope="col">Nama</th>
       <th scope="col">Posisi</th>
       <th scope="col">Gaji</th>
     </tr>
   </thead>
   <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Saipuddin</td>
        <td>Seo Editor</td>
        <td>Rp.3.000.000</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Sainuddin</td>
        <td>Writer</td>
        <td>Rp.2.500.000</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Sairuddin</td>
        <td>Writer</td>
        <td>Rp.2.500.000</td>
      </tr>
      <tr>
        <th scope="row ">4</th>
        <td>Sailormon</td>
        <td>Seo Editor</td>
        <td>Rp.4.000.000</td>
      </tr>
   </tbody>
</table>
</div>

Silahkan sesuaikan caption, header, dan nilai pada contoh tabel responsive di atas. Dan untuk melihat demonya, cek melalui JSFiddle di bawah ini.