Cara Membuat Responsive Table di Blogger
Oke Langsung Saja Ke Cara Pemasangannya Di Blogger Atau Blogspot Anda, Berikut Caranya Untuk Pemasangnya.
Jika di blog Anda sudah memiliki CSS table di templatenya, disarankan untuk menghapus semua CSS table agar tampilan table sesuai dengan yang saya bagikan
Pertama buka Blogger > Tema > Edit HTML
Kemudian Anda Cari Kode CSS Yaitu : ]]></b:skin> Atau </style>, kemudian Kamu Copy Kode Yang Di Bawah Ini dan Pastekan sebelum ]]></b:skin> Atau </style>
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}}Berikut ini contoh penulisan HTML table di postingan
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama</th>
<th>Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Berita News</td>
<td>Berita News</td>
</tr>
<tr>
<td>Berita News</td>
<td>Berita News</td>
</tr>
<tr>
<td>Berita News</td>
<td>Berita News</td>
</tr>
</tbody>
</table>
</div>Perlu diingat, saat menambahkan pilih tab HTML bukan Compose. Berikut Contoh dari tampilan responsive table