Membuat Tabel Blogger Responsive

Membuat Tabel Blogger Responsive Table blogger dengan menggunakan HTML dan CSS sangatlah mudah tapi harus telaten dan teliti salah satu bahan memperlengkap tampilan template blogspot untuk memposting artikel blogspot dengan menggunakan tabel sepertinya sesuatu keharusan yang harus di lakukan untuk membuat tampilan postingan menjadi tampak berkelas.
Tampilan postingan selain dari penyusunan kata yang membuat tampilan tidak monoton salah satunya adalah dengan tabel dan pemakaian tabel haruslah tepat sesuai keperluan.
Letakan kode css ini tepat di atas </style> atau ]]></b:skin>

/* ------ CSS TABEL SASTRACODE ------ */
.table-sastracode-responsive{line-height:1.5em;overflow-x:auto;font-size:15px}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{;border:1px solid #999;color:#333;font-family:sans-serif;font-size:100%;padding:5px;vertical-align:top}
.table tr:nth-child(even) td{background-color:transparent}
.table th{background-color:#089;color:#FFF;font-size:110%;font-weight: 700;text-align: center;border: 1px solid goldenrod;} 
.table tr.even:hover td,.table tr:hover td{color:#FFFFFF;background-color:#daa520}
@media screen and (max-width:768px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:414px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:411px){.table-responsive,.table{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:360px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}
@media screen and (max-width:320px){.table-responsive{width:100%;font-size:11px;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}
}

Untuk pemanggilnya terserah anda letakan bisa di antara postingan yang membutukan tabel atau di halaman, rubah sesuai keperluan.

<div class="table-sastracode-responsive">
<table class="table">
<tr>
<th colspan="3">Warung Mbok Sri</th>
</tr>
<tr>
<td rowspan="4">
<img src="URL-GAMBAR" width="350" height="150"/>
</td>
</tr>
<tr>
<td>Menu</td>
<td>Sego Empok Spesial</td>
</tr>
<tr>
<td>1 porsi</td>
<td>
<ul>
<li>Nasi Empok</li>
<li>Peyek</li>
<li>Mendol</li>
<li>Ikan asin</li>
<li>Sayur pedas</li>
</ul>
</tr>
<tr>
<td>Total Harga</td>
<td>Rp 10.000</td>
</tr>
</table>
</div>

Hasilnya seperti di bawah ini :

Warung Mbok Sri
	Menu	Sego Empok Spesial
	1 porsi	Nasi Empok Peyek Mendol Ikan asin Sayur pedas
	Total Harga	Rp 10.000

Semoga bermanfaat dan membantu kegiatan anda.
CONTOH LAIN