Dari penjelasan singkat diatas sebelumnya admin telah membuat artikel serupa yaitu Cara gampang membuat tabel responsive pada postingan blog dari kedua metode ini silahkan kalian pilih mana yang paling cocok untuk diterapkan.
Cara membuat tabel responsive pada blog
- Masuk ke dashboard blog milik anda
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML
- Cari kode ]]</b:skin> lalu tambahkan kode dibawah ini tepat diatas kode ]]</b:skin>
table{background-color:transparent;width:100%;max-width:100%;margin-bottom:20px} table img{width:100%;height:auto} table.tr-caption-container{padding:0;border:none} table td.tr-caption{font-size:12px;font-style:italic} table{border-spacing:0;border-collapse:collapse} td,th{padding:0} th{text-align:left} .table{width:100%;max-width:100%;margin-bottom:20px} .table a{text-decoration:none!important} .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{padding:8px;line-height:1.42857143;vertical-align:top} .table > thead > tr > th{background-color:#3498DB;color:#fff;vertical-align:bottom} .table > thead > tr > th a{color:#fff!important} .table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0} .table > tbody > tr:nth-of-type(odd){background-color:#f9f9f9} table col[class*="col-"]{position:static;display:table-column;float:none} table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none} .table-responsive{min-height:.01%;overflow-x:auto} @media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive > .table{margin-bottom:0}.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{white-space:nowrap}.table-responsive > .table-bordered{border:0}}
- Setelah itu simpan tema
- Selanjutnya, berikut penulisan tabel dalam postingan blog (pada menu HTML bukan di COMPOSE)
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Faronesia</td>
<td>Faronesia</td>
</tr>
<tr>
<td>Faronesia</td>
<td>Faronesia</td>
</tr>
<tr>
<td>Faronesia</td>
<td>Faronesia</td>
</tr>
</tbody>
</table>
</div>
Catatan:
Ubah dan tambah tabel sesuai keinginan anda.
Semoga tutorial singkat Cara membuat tabel responsive pada blog ini bermanfaat, jangan lupa share dan komentar dibawah.