Membuat tabel responsive di postingan blogger

"bagaimana caranya membuat tabel responsive dalam postingan blogger. Cara ini memungkinkan kalian harus menambahkan, bahkan menghapus css bawaan dari t"

Tabel menjadi sangat penting ketitka kita ingin menuliskan data secara terperinci, sehingga dapat terlihat profesional bagi para pembacanya. Apalagi bagi kita sebagai blogger, terkadang ada sebuah data yang ingin kita masukan kedalam tabel. tetapi sayangnya tabel terlihat bagus pada tampilan dekstop saja, tetapi untuk tampilan mobile atau smartphone sangat tidak enak untuk dipandang.

Oleh karena itu, kali ini saya akan berbagi bagaimana caranya membuat tabel responsive dalam postingan blogger. Cara ini memungkinkan kalian harus menambahkan, bahkan menghapus css bawaan dari template nya.

Membuat tabel responsive di postingan blogger

Pertama yang harus kalian lakukan adalah menyalin semua kode css di bawah ini:

/* Table */
.post-body table{width:100%;max-width:100%;border-radius:3px;overflow:hidden}.post-body table td,.post-body table caption{border:0;padding:10px 15px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem}.post-body table td:first-child{border-right:0}.post-body table th{color:#222;border:0;padding:10px 15px;text-align:left;vertical-align:top;font-size:15px;border-top:1px solid rgba(0,0,0,0.05)}.post-body table.tr-caption-container{border:0;margin:0}.post-body table caption{border:none;font-style:italic}.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0}.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#57606f}.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}.post-body table tr:nth-of-type(even) td{background-color:#f6f8f9}.post-body table tr:nth-of-type(odd) td{background-color:#ecf0f1}.post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)}.post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)}

.tb-idnetzen {
    font-family: sans-serif;
    color: #444;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #f13939;
}

.tb-idnetzen tr th{
    background: #ff4757;
    color: #fff;
    font-weight: bold;
}
 
.tb-idnetzen, th, td {
    padding: 8px 10px;
    text-align: left;
}
 
.tb-idnetzen tr td {
    font-size:12px;
}
 
.tb-idnetzen tr:nth-child(even) {
    background-color: #f2f2f2;
}

.tb-idnetzen a {
text-decoration:none;
}
.tb-idnetzen a:visited {
color: red;
text-decoration: underline;
}
.vol-inf-h{
font-weight:bold;
}

Setelah selesai menyalin kode CSS diatas, kalian masuk ke Blogger => Tema => Edit Html. Setelah itu tekan tombol kombinasi di keyboard dengan cara CTRL + F lalu cari kode ini : ]]></b:skin>

Lalu pastekan atau tempel kode css diatas kode ]]></b:skin> ini.

Sebelumnya, jika ada kode css tabel bawaan template nya, silahkan bisa hapus terlebih dahulu, lalu gantikan dengan kode baru diatas.

Baca Juga Membuat daftar isi di postingan blogger tanpa mengubah template blog

Membuat postingan

Sekarang saatnya kalian untuk membuat postingan yang berisi tabel. untuk kode html tabel kalian bisa menggunakan kode di bawah ini :

<table class="tb-idnetzen">
 <tr>
   <th>No</th>
   <th>Nama</th>
   <th>Email</th>
 </tr>
 <tr>
   <td>1</td>
   <td>Hera</td>
   <td>hera@gmail.com</td>
 </tr>
 <tr>
   <td>2</td>
   <td>Rizki</td>
   <td>rizki@gmail.com</td>
 </tr>
 <tr>
   <td>3</td>
   <td>eristiazhi</td>
   <td>eristiazhi@gmail.com</td>
 </tr>
 <tr>
   <td>4</td>
   <td>Ristia</td>
   <td>ristia@gmail.com</td>
 </tr>
</table>

Masukan kode tabel tersebut di postingan kalian. untuk data nya bisa dikurangi atau ditambahkan sesuai dengan kebutuhan masing masing. dan untuk hasil akhirnya, bisa di lihat di tabel di bawah ini :

No	Nama	Email
1	Hera	hera@gmail.com
2	Rizki	rizki@gmail.com
3	Eristiazhi	eristiazhi@gmail.com
4	Ristia	ristia@gmail.com

Kesimpulan

Sebenarnya masalah tabel yang tidak responsive di tampilan mobile ini terjadi dari template yang kalian gunakan. Ada juga beberapa template yang sudah responsive sehingga tidak perlu melakukan penambahan css seperti diatas. Tetapi bagi template yang tidak responsive untuk tabelnya, maka cara ini adalah cara terbaik menurut saya.

Komentar