Cara Membuat HTML CSS Flat Table Responsive Di Blogger / Blogspot

Oke Bro Kali Ini Hekthatman Akan Memberikan Tutorial Untuk Anda Yaitu : Cara Membuat Table Flat Design Di Blog Anda Dan Responsive Juga Bisa Terlihat Lebih Bagus , Oke Langsung Saja Ke Cara Pemasangannya Di Blogger Atau Blogspot Anda, Berikut Caranya Untuk Pemasangnya.

Cara Memasang Table Responsive Di Blog

Blogger === > Templates === > Edit Templates
Kemudian Anda Cari Kode CSS Yaitu : ]]></b:skin> Atau </style>
Kemudian Kamu Copy Kode Yang Di Bawah Ini
Dan Kamu Pastekan Tepat Di Atas ]]></b:skin> Atau </style>

CSS

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;} }

Dan Simpan

Contoh

Cara Membuat HTML CSS Flat Table Responsive Di Blogger / Blogspot

Kalau Anda Ingin Pasang Di Postingan Anda, Anda Pakek Kode Yang Di Bawah Ini Saat Anda Melakukan Postingan

HTML

<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th>Name</th>
    <th>Data </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Walker</td>
    <td>Walker</td>
  </tr>
  <tr>
    <td>Walker</td>
    <td>Walker</td>
  </tr>
  <tr>
    <td>Walker</td>
    <td>Walker</td>
  </tr>
</tbody>
</table>
</div>

1 komentar:


EmoticonEmoticon