Cara gampang membuat tabel responsive pada postingan blog

Banyak sekali di pencarian google yang memberikan tutorial script tabel namun ujung-ujungnya tidak responsiv terhadap blog yang kita miliki, juga tidak sedikit pula yang kesal akan hal tersebut. Dari masalah ini admin akan memberikan tutorial cara gampang membuat tabel responsive pada postingan blog.

Walaupun kita telah menggunakan tema blog yang sudah responsive sekalipun, sering kali kita melihat tabel yang telah kita buat pada postingan tidak responsive sehingga saat menggunakan smartphone maupun tablet terlihat tabel yang terpotong keluar dari batas postingan. Tentu saja hal ini membuat kita sang pemilik blog maupun user merasa terganggu karena akan ada postingan yang tidak lengkap akibat terpotong maupun keluar jalur ketika dibaca menggunakan smartphone maupun tablet.

Lalu bagaimana cara mengatasi hal tersebut??

Mari ikuti langkah-langkahnya sebagai berikut:

Cara gampang membuat tabel responsive pada postingan blog

1. Masuk dashboard blog
2. Klik menu tema
3. Klik html
4. Cari kode ]]></b:skin> (ctrl+f untuk mempermudah pencarian
5. copy kode dibawah ini lalu pastekan diatas kode ]]></b:skin>

/* CSS Post Table */ .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;} .post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table.tr-caption-container {border:1px solid #e9e9e9;} .post-body table caption{border:none;font-style:italic;} .post-body table{} .post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;} .post-body table tr:nth-child(even) &gt; td {background-color:#f9f9f9;} .post-body table tr:nth-child(even) &gt; td:hover {background-color:#0082d8;} .post-body th{background:#008080;font-weight:bold;text-transform:uppercase;font-size:14px} .post-body th:hover{background:#fdfdfd;} .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target=&quot;_blank&quot;]:after {margin-left:5px;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body td.tr-caption {font-size:80%;padding:0px 8px 8px !important;} .post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .widget ul {padding:0;}

6. Selanjutnya simpan tema
7. Selanjutnya masuk ke postingan lalu klik HTML lalu pastekan kode tabel dibawah ini

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><th>Header Kolom 1</th><th>Header Kolom 2</th> <th>Header Kolom 3</th></tr>
<tr><td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td><td>Baris 1 Kolom 3</td></tr>
<tr><td>Baris 2 Kolom 1</td><td>Baris 2 Kolom 2</td><td>Baris 2 Kolom 3</td></tr>
<tr><td>Baris 3 Kolom 1</td><td>Baris 3 Kolom 2</td><td>Baris 3 Kolom 3</td></tr>
<tr><td>Baris 4 Kolom 1</td><td>Baris 4 Kolom 2</td><td>Baris 4 Kolom 3</td></tr>
<tr><td>Baris 5 Kolom 1</td><td>Baris 5 Kolom 2</td><td>Baris 5 Kolom 3</td></tr>
<tr><td>Baris 6 Kolom 1</td><td>Baris 6 Kolom 2</td><td>Baris 6 Kolom 3</td></tr>
<tr><td>Baris 7 Kolom 1</td><td>Baris 7 Kolom 2</td><td>Baris 7 Kolom 3</td></tr>
</tbody>
</table>

Catatan:
Ubah jumlah tabel dan nama-nama pada tabel tersebut sesuai keinginian.

DEMO LIHAT DI BAWAH INI

Header Kolom 1	Header Kolom 2	Header Kolom 3
Baris 1 Kolom 1	Baris 1 Kolom 2	Baris 1 Kolom 3
Baris 2 Kolom 1	Baris 2 Kolom 2	Baris 2 Kolom 3
Baris 3 Kolom 1	Baris 3 Kolom 2	Baris 3 Kolom 3
Baris 4 Kolom 1	Baris 4 Kolom 2	Baris 4 Kolom 3
Baris 5 Kolom 1	Baris 5 Kolom 2	Baris 5 Kolom 3
Baris 6 Kolom 1	Baris 6 Kolom 2	Baris 6 Kolom 3
Baris 7 Kolom 1	Baris 7 Kolom 2	Baris 7 Kolom 3

Itulah tadi tips sederhana cara gampang membuat tabel responsive pada postingan blog semoga bermanfaat untuk blog kalian yang mengalami masalah yang sama seperti yang telah dijelaskan diatas. Terimakasih sudah berkunjung.

Share this post