Berikut adalah langkah-langkah untuk membuat Flat Table Responsive
- Masuk Blogger-Template-Edit HTML dan copykan kode di bawah setelah kode <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
- Copy kode CSS di bawah sebelum kode ]]></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;}
}Kode di atas menggunakan media screen max-width 767px jadi ketika lebar maximal layar 767px akan ada scroll di bawah table atau bisa mengubahnya menjadi auto.
- Cara penggunaan Flat Table Responsive copykan kode HTML di bawah di postingan, copy di HTML jangan di Compose.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Nama Terakhir</th>
</tr>
</thead>
<tbody>
<tr>
<td>David</td>
<td>Silva</td>
</tr>
<tr>
<td>David </td>
<td>Beckham</td>
</tr>
<tr>
<td>John</td>
<td>Lennon</td>
</tr>
</tbody>
</table>
</div>Bagi yang mau lihat hasilnya silahkan lihat demonya dulu
Silahkan baca juga Cara Membuat Sitemap Atau Daftar Isi Blog Yang Responsive
