Membuat Tabel Otomatis Responsive Ala Bootstrap Dengan Jquery

Membuat Tabel Otomatis Responsive Ala Bootstrap Dengan Jquery

Bola Hero Gawai

Membuat Tabel Otomatis Responsive Ala Bootstrap Dengan Jquery

Membuat Tabel Otomatis Responsive Ala Bootstrap Dengan Jquery
Kadang sebagian blogger menampilkan tabel pada artikel blognya untuk memperjelas isi kontennya. Namun di zaman responsive sekarang ini, tabel juga harus ikut responsive agar tabel-nya bisa dilihat dengan baik pada device-device kecil.

Namun selain responsive, alangkah baiknya tabel juga dibuat dengan valid HTML5 sehingga aman di semua browser. Dan untuk membuat tabel dengan mudah dan valid HTML5, saya sudah pernah mempostingnya, jadi silahkan simak postingannya di link di bawah ini.

Cara Mudah Membuat Tabel Untuk Postingan Blog Agar Valid HTML5

Nah tabel yang dibuat dengan tutorial pada link di atas tersebut belum responsive, jadi kita harus menambahkan beberapa kode lagi. Kode CSS responsive tabel ini diambil dari Bootstrap sehingga ketika di layar yang lebih kecil, tabel tetap bisa dibaca karena susunan tabelnya tidak rusak atau tidak terpotong namun tabel bisa digeser ke kiri dan ke kanan.

Agar semua tabel yang telah dibuat di postingan otomatis menjadi responsive (agar tidak perlu mengedit postingan satu per satu), silahkan tambahkan kode jquery di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
$(document).ready(function() {
  $("table").wrap("<div class='table-responsive'></div>");
  $("table").addClass("table");
});
//]]>
</script>
</b:if>

Namun pastikan dulu blog Anda sudah menggunakan jquery library berapa pun versinya.

Setelah itu, silahkan tambahkan kode CSS tabel responsive Bootstrap di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.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;
    border: 1px solid #ddd
  }
  .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
  }
  .table-responsive>.table-bordered {
    border: 0
  }
  .table-responsive>.table-bordered>tbody>tr>td:first-child,
  .table-responsive>.table-bordered>tbody>tr>th:first-child,
  .table-responsive>.table-bordered>tfoot>tr>td:first-child,
  .table-responsive>.table-bordered>tfoot>tr>th:first-child,
  .table-responsive>.table-bordered>thead>tr>td:first-child,
  .table-responsive>.table-bordered>thead>tr>th:first-child {
    border-left: 0
  }
  .table-responsive>.table-bordered>tbody>tr>td:last-child,
  .table-responsive>.table-bordered>tbody>tr>th:last-child,
  .table-responsive>.table-bordered>tfoot>tr>td:last-child,
  .table-responsive>.table-bordered>tfoot>tr>th:last-child,
  .table-responsive>.table-bordered>thead>tr>td:last-child,
  .table-responsive>.table-bordered>thead>tr>th:last-child {
    border-right: 0
  }
  .table-responsive>.table-bordered>tbody>tr:last-child>td,
  .table-responsive>.table-bordered>tbody>tr:last-child>th,
  .table-responsive>.table-bordered>tfoot>tr:last-child>td,
  .table-responsive>.table-bordered>tfoot>tr:last-child>th {
    border-bottom: 0
  }
}
</style>
</b:if>

Nah sekarang silahkan periksa postingan yang memiliki tabel dengan smartphone Anda.


Silahkan coba geser-geser kolomnya pada demo tersebut untuk melihat responsivenya.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

11 Comments Add Comment

Asyik nich tabelnya otmatis terbaca smua.. ga bakal kepotong lgi tabelnya sperti kemarin :(

Balas

wah patut untuk dicoba ni

Balas

wah, keren nih kang. ^_^

Balas

terapin dlu kang, sekalian mengembangkan lagi. makasih kang ady

Balas

Iya mas, tabel tetap terbaca di hp.

Balas

Iya silahkan mas :)

Balas

Makasih mas :)

Balas

Iya silahkan mas biar lebih pas dengan blog.

Balas

btw blm sempet nyoba nih, abis bikin privacy sama about kang :v
ini tabel responsive kang?

Balas

Mas Adhy...Untuk template bawaan blogger yang telah responsife berkat Tutornya Mas Adhy juga, apakah bisa digunakan..? soalnya gak ngerti blog yang memiliki Jquery Library..msh newbie, Terima kasih

Balas

Bisa mbak,
Jika tidak jalan mungkin belum ada jquery library-nya, coba pasang juga kode ini <script type="text/javascript" src="//code.jquery.com/jquery-3.1.0.js"></script> di atas kode </head>

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×