Cara Membuat Table Flat Responsive Di Blogger

![]() |
Cara Membuat Table Flat Responsive Di Blogger |
Voizd.com - Cara Membuat Table Flat Responsive Di Blogger, dikesempatan kali ini kita akan membahas tentang table yang dapat digunakan untuk mengisi konten blog yang tentunya sangat responsive saat digunakan.
Table merupakan komponen yang digunakan oleh sebagian blogger untuk membuat tampilan tulisan dan data yang di tulis di sebuah website menjadi tertata rapih, namun tidak sedikit para blogger yang kesulitan saat ingin membuat sebuah table yang cocok dan responsive di situs nya
nah tujuan tulisan kali ini semoga dapat memberikan manfaat kepada blogger agar tidak lagi kesulitan dalam menulisakan dan membuat sebuah table di Blog.
Berikut Cara Membuat Table Flat Responsive :
1. Silahkan anda backup template blog terlebih dahulu , guna mengatasi jika nantinya terdapat kesalahan saat pengeditan coding.
2. Masuk ke Blogger lalu pilih Tema / Themes.
3. Klik tanda panah kebawah , lalu Edit HTML.
4. Gunakan kombinasi tombol CTRL+F, untuk mencari sebuah coding
5. Carilah kode <head> , lalu pastekan kode berikut dibawah <head>.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
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;} }
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>Nama Depan</th> <th>Nama Belakang</th> </tr> </thead> <tbody> <tr> <td>Mas</td> <td>Rizal</td> </tr> <tr> <td>Kang</td> <td>Rizal</td> </tr> <tr> <td>Bang</td> <td>Rizal</td> </tr> </tbody> </table> </div>