pada kesempatan kali ini saya akan share sedikit ilmu setelah sekiana lama mencari dan mepelajari dari berbagai sumber yang terpercaya dan handal. format tabel dalam postingan blog AMP maupun Non-AMP ini sangat flexible bisa digunakan untuk pengguna smartphone juga. simak langkahnya berikut ini:
Silahkan simpan CSS berikut di style edit HTML Template blog Anda.
.table-responsive{min-height:.01%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;border-spacing:0}
.table td,.table th{background-color:#F3F5EF;border:1px solid #bbb;color:#333;font-family:sans-serif;font-size:100%;padding:10px;vertical-align:top}
.table tr:nth-child(even) td{background-color:#F0F0E5}
.table th{background-color:#EAE2CF;color:#333;font-size:110%}
.table tr.even:hover td,.table tr:hover td{color:#222;background-color:#FFFBEF}
.tg-bf{font-weight:700}
.tg-it{font-style:italic}
.tg-left{text-align:left}
.tg-right{text-align:right}
.tg-center{text-align:center}
@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>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}
}
Kemudian untuk menampilkan tabel responsive di postingan silahkan gunakan HTML tabel dibawah ini dalam mode editor HTML saat membuat postingan baru.
CONTOH JUDUL Jenis Barang Harga Jumlah Barang Diskon P1 Rp. 150.000 5 Pcs 10 % P2 Rp. 200.000 5 Pcs 11 % P3 Rp. 300.000 4 Pcs 12 % P4 Rp. 350.000 1 Pcs 13 %
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
dapat dilihat hasilnya sebagai berikut:
| CONTOH JUDUL | |||
|---|---|---|---|
| Jenis Barang | Harga | Jumlah Barang | Diskon |
| P1 | Rp. 150.000 | 5 Pcs | 10 % |
| P2 | Rp. 200.000 | 5 Pcs | 11 % |
| P3 | Rp. 300.000 | 4 Pcs | 12 % |
| P4 | Rp. 350.000 | 1 Pcs | 13 % |
Keterangan:
Untuk kode class="tg-center tg-bf" silahkan sesuai dengan keperluan untuk mengatur letak header table.tg-bf untuk huruf tebal
tg-it untuk huruf miring
tg-left untuk rata kiri
tg-right untuk rata kanan
tg-center untuk rata tengah selamat mencoba, semoga bermanfaat.