Cara Memasang Tabel Responsive di Blogger

Cara Memasang Tabel Responsive di Blogger - Pada kesempatan kali ini admin Galihdesign ingin membagikan css untuk menampilkan tabel responsive. Css tabel yang akan admin berikan biasanya dipasang di dalam postingan untuk menampilkan daftar data agar terlihat lebih rapi.

Cara Memasang Tabel Responsive di Blogger

Pertama, masuk ke Blogger > Template > Edit HTML.

Cari kode </head> dan Paste kode berikut ini tepat diatasnya.

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #5a97ff;padding: 5px 10px;text-align:left;vertical-align:top;background:#4588f3 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:400;text-transform:uppercase;font-size:14px}
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:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-style:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

Setelah itu klik Simpan. Cara menggunakannya,ikuti kode berikut ini :

<table cellpadding="0" cellspacing="0" style="text-align: left;">
   <tbody>
    <tr> <th>Judul 1</th><th>Judul 2</th> <th>Judul 3</th></tr>
    <tr> <td>Bakpau</td><td>Enak</td> <td>Murah</td></tr>
    <tr> <td>Siomay</td><td>Enak</td> <td>Murah</td></tr>
    <tr> <td>Cilok</td><td>Enak</td> <td>Murah</td></tr>
   </tbody>
 </table>

Selesai!

Lihat Hasilnya!

Related Posts