Cara Membuat Tabel Keren Responsive Di Blog

Tabel Keren - Haloo sobat kali ini saya akan membagikan cara membuat tabel keren, pasti sobat ingin jugakan membuat postingan menggunakan tabel? Ya mau dong! Nah tenang aja sobat bakal bisa kok buatnya persis seperti gambar dibawah ini.

Cara Membuat Tabel Keren DI Blog

1. Pertama, Salin Script dibawah ini tepat diatas kode </style> atau ]]></b:skin> 

 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;}
} 

2. Simpan.
3. Cara penggunaannya salin script dibawah ini pada mode HTML.

 <div class="table-responsive">
<table class="table"> 
<thead>
 <tr>
 <th>Nama Pertama</th> 
 <th>Nama Terakhir</th> 
 </tr>
</thead> 
<tbody>
 <tr> 
 <td>Husni</td> 
 <td>Mubarok</td> 
 </tr>
 <tr> 
 <td>Dunia</td> 
 <td>Bluez</td> 
 </tr>
 <tr> 
 <td>Di</td> 
 <td>Sini</td> 
 </tr>
</tbody> 
</table>
</div> 

Hasilnya

Nama Pertama	Nama Terakhir
Husni	Mubarok
Dunia	Bluez
Di	Sini

Untuk mengganti warna background-color:#3498DB;

Sekian Tutorial yang saya bagikan semoga bermanfaat bagi anda. sampai jumpa.