Cara Membuat Tabel Keren Responsive Di Blog
Cara Membuat Tabel Keren DI Blog
1. Pertama, Salin Script dibawah ini tepat diatas kode </style> atau ]]></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;}
}
2. Simpan.
3. Cara penggunaannya salin script dibawah ini pada mode HTML.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Pertama</th>
<th>Nama Terakhir</th>
</tr>
</thead>
<tbody>
<tr>
<td>Husni</td>
<td>Mubarok</td>
</tr>
<tr>
<td>Dunia</td>
<td>Bluez</td>
</tr>
<tr>
<td>Di</td>
<td>Sini</td>
</tr>
</tbody>
</table>
</div>
Hasilnya
| Nama Pertama | Nama Terakhir |
|---|---|
| Husni | Mubarok |
| Dunia | Bluez |
| Di | Sini |
Untuk mengganti warna background-color:#3498DB;
Sekian Tutorial yang saya bagikan semoga bermanfaat bagi anda. sampai jumpa.
