Membuat Tabel Otomatis Responsive Ala Bootstrap Dengan Jquery

Kadang sebagian blogger menampilkan tabel pada artikel blognya untuk memperjelas isi kontennya. Namun di zaman responsive kini ini, tabel juga harus ikut responsive semoga tabel-nya dapat dilihat dengan baik pada device-device kecil.

Namun selain responsive, alangkah baiknya tabel juga dibentuk dengan valid HTML5 sehingga kondusif di semua browser. Dan untuk menciptakan tabel dengan gampang dan valid HTML5, aku sudah pernah mempostingnya, jadi silahkan simak postingannya di link di bawah ini.

Cara Praktis Membuat Tabel Untuk Postingan Blog Agar Valid HTML5

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

Agar semua tabel yang telah dibentuk di postingan otomatis menjadi responsive (agar tidak perlu mengedit postingan satu per satu), silahkan tambahkan isyarat jquery di bawah ini di atas isyarat </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 memakai jquery library berapa pun versinya.

Setelah itu, silahkan tambahkan isyarat CSS tabel responsive Bootstrap di bawah ini di atas isyarat </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 kini silahkan periksa postingan yang mempunyai tabel dengan smartphone Anda.

Demo on JSFiddle

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

Sumber https://www.kompiajaib.com/

Share this post