Cara Membuat Tabel Super Responsive pada Blog

Halo sahabatku semu di kesmpatan kali ini saya akan membagikan panduan pada kalian cara membuat tabel Responsive pada postingan. Dari pada kalian membuat script sendiri saya akan memberikan scriptnya yang sudah jadi kalian tingga menempelkan saja.
Membuat script Responsive menggunakan dua perpaduan yaitu script HTML dan CSS, dengan adanya dua itu tabel yang kita buata akan terasa enak di pandang.

Ikuti langkah - langkah di bawah ini :

Silahkan buka edit template anda, copy dan letakkan kode berikut di atas kode
]]></b:skin>

/* CSS Post Table by trikpos.com */
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.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;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#f53b3b;color:#fff;}
.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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
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;}


Tabel 1
<table width="400" border="1">
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
<tr><td>Calon Donatur</td><td>Nama</td><td>Nominal</td></tr>
</table>

Tabel 2
<table width="400" border="1">
<tr><td colspan="2">Daftar Donatur</td> </tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

Tabel 2
<table width="400" border="1">
<tr><td rowspan="4">Daftar Donatur</td></tr>
<tr><td>1</td><td>Nama</td></tr>
<tr><td>2</td><td>Nama</td></tr>
<tr><td>3</td><td>Nama</td></tr>
</table>

Seomga Cara Membuat Tabel Super Responsive pada Blog bisa bermanfaat buat kalian. Jangan lupa ikuti updatean saya.
Post a Comment (0)
Previous Post Next Post