Cara Membuat Tabel Responsive dengan JavaScript (Js) di Postingan Blogger

Kali ini saya akan berbagi tutorial bagaimana caranya membuat dan memasang tabel Responsive di artikel Blogger / Blogspot dengan bantuan JavaScript (Js).

Tabel yang dibagikan kali ini berfungsi memisahkan atau mengelompokkan bagian tertentu pada sebuah teks.

Selain itu, bagi yang ingin menerapkan tutorial ini, diharuskan menggunakan JavaScript (Js) dengan tujuan agar tampilan tabelnya Responsive, alias tidak bertumpuk atau tabel tidak rapi.

Cara Membuat Tabel Responsive dengan JavaScript (Js) di Postingan Blogger

Login ke Blogger > Tema > Edit HTML

Simpan kode di bawah ini, di atas kode </head>

<style type='text/css'>
/*<![CDATA[*/
*{margin:0;padding:0;}
table{background:white;border-collapse:collapse;margin:1.25em 0 0;width:100%;}
table tr,table th,table td{border:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem;}
table th,table td{padding:10px 12px;text-align:left;}
table th{background:#56a2cf;color:#ffffff;text-transform:uppercase;}
table tr td{background:#eaf3f5;color:#999999;}
table tr:nth-of-type(2n+2) td{background:#ffffff;}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{font-size:.8125rem;padding:0;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before{background:#56a2cf;color:white;margin-right:10px;padding:2px 10px;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{display:inline-block;padding:2px 5px;}
table.bt tfoot th:first-of-type:before,table.bt tfoot th:first-of-type .bt-content,table.bt tfoot td:first-of-type:before,table.bt tfoot td:first-of-type .bt-content,table.bt tbody td:first-of-type:before,table.bt tbody td:first-of-type .bt-content{padding-top:10px;}
table.bt tfoot th:last-of-type:before,table.bt tfoot th:last-of-type .bt-content,table.bt tfoot td:last-of-type:before,table.bt tfoot td:last-of-type .bt-content,table.bt tbody td:last-of-type:before,table.bt tbody td:last-of-type .bt-content{padding-bottom:10px;}
@media only screen and (max-width:568px){#table-no-resize thead{display:none;}#table-no-resize tbody td{border:none!important;display:block;font-size:.8125rem;padding:0;vertical-align:top;/* IE 9 */    float:left\9;width:100%\9;}#table-no-resize tbody td:before{background:#56a2cf;content:attr(data-th) ":";color:white;display:inline-block;font-weight:bold;margin-right:10px;padding:2px 10px;width:6.5em;}#table-no-resize tbody td .bt-content{display:inline-block;padding:2px 5px;}#table-no-resize tbody td:first-of-type:before,#table-no-resize tbody td:first-of-type .bt-content{padding-top:10px;}#table-no-resize tbody td:last-of-type:before,#table-no-resize tbody td:last-of-type .bt-content{padding-bottom:10px;}}
table.two-axis tr td:first-of-type{background:#cadde1;}
@media only screen and (max-width:568px){table.two-axis tr td:first-of-type,table.two-axis tr:nth-of-type(2n+2) td:first-of-type,table.two-axis tr td:first-of-type:before{background:#3584b3;color:#ffffff;}table.two-axis tr td:first-of-type{border-bottom:1px solid #e4ebeb;}table.two-axis tr td:first-of-type:before{padding-bottom:10px;}}
.bt-wrapper.active{margin-top:1.5em;}
.bt-wrapper.active table{margin:0;}
table{width:100%;}
.table{margin:30px 0;border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e0e0e0;}
.table caption{color:#333;font-style:italic;font-size:85%;line-height:1;padding:1em 0;text-align:center;}
.table td,.table th{border-left:1px solid #e0e0e0;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:0.5em 1em;font-weight:normal;}
.table td:first-child,.table th:first-child{border-left-width:0;}
.table thead,.table tfoot{background-color:#f05050;color:#fff;text-align:left;vertical-align:bottom;}
.table thead td,.table tfoot td,.table thead th,.table tfoot th{border-color:#fff;}
.table td{background-color:transparent;}
.table_striped tr:nth-child(2n-1) td{background-color:#ececec;}
.table_bordered td{border-bottom:1px solid #e0e0e0;}
.table_bordered tbody > tr:last-child > td,.table_bordered thead > tr:last-child > td{border-bottom-width:0;}
.table_horizontal td,.table_horizontal th{border-width:0 0 1px 0;border-bottom:1px solid #e0e0e0;}
.table_horizontal tbody > tr:last-child > td,.table_horizontal thead > tr:last-child > td{border-bottom-width:0;}
table.bt thead,table.bt tbody th{display:none;}
table.bt tfoot th,table.bt tfoot td,table.bt tbody td{border:none;display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;
  float:left\9;width:100%\9;}
table.bt tfoot th::before,table.bt tfoot td::before,table.bt tbody td::before{content:attr(data-th) ":";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:bold;width:6.5em;}
table.bt tfoot th.bt-hide,table.bt tfoot td.bt-hide,table.bt tbody td.bt-hide{display:none;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{vertical-align:top;}
.bt-wrapper.active{max-height:310px;overflow:auto;-webkit-overflow-scrolling:touch;}
/*]]>*/
</style>

Selanjutnya simpan kode di bawah ini, di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("#table").basictable(),$("#table-two-axis").basictable()});
!function(t){t.fn.basictable=function(a){var e=function(a,e){var i=[];e.tableWrap&&a.wrap('<div class="bt-wrapper"></div>');var s="";s=a.find("thead tr th").length?"thead th":a.find("tbody tr th").length?"tbody tr th":a.find("th").length?"tr:first th":"tr:first td",t.each(a.find(s),function(){var a=t(this),e=parseInt(a.attr("colspan"),10)||1,n=a.closest("tr").index();i[n]||(i[n]=[]);for(var s=0;e>s;s++)i[n].push(a)}),t.each(a.find("tbody tr"),function(){n(t(this),i,e)}),t.each(a.find("tfoot tr"),function(){n(t(this),i,e)})},n=function(a,e,n){a.children().each(function(){var a=t(this);if(""!==a.html()&&"&nbsp;"!==a.html()||n.showEmptyCells){for(var i=a.index(),s="",r=0;r<e.length;r++){0!=r&&(s+=": ");var o=e[r][i];s+=o.text()}a.attr("data-th",s),n.contentWrap&&!a.children().hasClass("bt-content")&&a.wrapInner('<span class="bt-content" />')}else a.addClass("bt-hide")})},i=function(a){t.each(a.find("td"),function(){var a=t(this),e=a.children(".bt-content").html();a.html(e)})},s=function(a,e){e.forceResponsive?t(window).width()<=e.breakpoint?r(a,e):o(a,e):a.removeClass("bt").outerWidth()>a.parent().width()?r(a,e):o(a,e)},r=function(t,a){t.addClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").addClass("active")},o=function(t,a){t.removeClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").removeClass("active")},c=function(t,a){t.find("td").removeAttr("data-th"),a.tableWrap&&t.unwrap(),a.contentWrap&&i(t),t.removeData("basictable")},b=function(t){t.data("basictable")&&s(t,t.data("basictable"))};this.each(function(){var n=t(this);if(0===n.length||n.data("basictable"))return n.data("basictable")&&("destroy"==a?c(n,n.data("basictable")):"start"===a?r(n,n.data("basictable")):"stop"===a?o(n,n.data("basictable")):s(n,n.data("basictable"))),!1;var i=t.extend({},t.fn.basictable.defaults,a),l={breakpoint:i.breakpoint,contentWrap:i.contentWrap,forceResponsive:i.forceResponsive,noResize:i.noResize,tableWrap:i.tableWrap,showEmptyCells:i.showEmptyCells};n.data("basictable",l),e(n,n.data("basictable")),l.noResize||(s(n,n.data("basictable")),t(window).bind("resize.basictable",function(){b(n)}))})},t.fn.basictable.defaults={breakpoint:568,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1}}(jQuery);
//]]>
</script>

Ok silakan ketuk tombol SAVE untuk menyimpan perubahan pada Blogger Template.

Sesudah memasang CSS dan JavaScript (Js) yang dibutuhkan, selanjutnya ialah bagaimana memanggil tabel tersebut.

Masih di Blogger > Postingan > Entri Baru > Mode tulis HTML (bukan Compose)

Gunakan kode di bawah ini:

<table id="table-two-axis" class="two-axis bt">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Height</th>
        <th>Province</th>
        <th>Sport</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-th="Name"><span class="bt-content">Teja Sukmana</span></td>
        <td data-th="Age"><span class="bt-content">18</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">180</span></td>
        <td data-th="Province"><span class="bt-content">Garut Indonesia</span></td>
        <td data-th="Sport"><span class="bt-content">Coli Enak</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">John Stone</span></td>
        <td data-th="Age"><span class="bt-content">30</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">5'9</span></td>
        <td data-th="Province"><span class="bt-content">Ontario</span></td>
        <td data-th="Sport"><span class="bt-content">Badminton</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">Jane Strip</span></td>
        <td data-th="Age"><span class="bt-content">29</span></td>
        <td data-th="Gender"><span class="bt-content">Female</span></td>
        <td data-th="Height"><span class="bt-content">5'6</span></td>
        <td data-th="Province"><span class="bt-content">Manitoba</span></td>
        <td data-th="Sport"><span class="bt-content">Hockey</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">Gary Mountain</span></td>
        <td data-th="Age"><span class="bt-content">21</span></td>
        <td data-th="Gender"><span class="bt-content">Mail</span></td>
        <td data-th="Height"><span class="bt-content">5'8</span></td>
        <td data-th="Province"><span class="bt-content">Alberta</span></td>
        <td data-th="Sport"><span class="bt-content">Curling</span></td>
      </tr>
      <tr>
        <td data-th="Name"><span class="bt-content">James Camera</span></td>
        <td data-th="Age"><span class="bt-content">31</span></td>
        <td data-th="Gender"><span class="bt-content">Male</span></td>
        <td data-th="Height"><span class="bt-content">6'1</span></td>
        <td data-th="Province"><span class="bt-content">British Columbia</span></td>
        <td data-th="Sport"><span class="bt-content">Hiking</span></td>
      </tr>
    </tbody>
  </table>

Terakhir, apabila ingin mengimplementasikannya di postingan blog, kalian bisa menyesuaikannya sendiri. Jika ingin belajar, gunakan blog demo ya!

Itulah tutorial bagaimana cara membuat tabel Responsive di postingan Blogger dengan bantuan JavaScript (Js) agar Responsive.

Sumber: https://mastamvan.blogspot.com/2016/07/cara-membuat-tabel-responsive-di-blogger.html