Responsive Tabel With Jquery

by kompiajaib

HTML

<table class="tg-table-paper">
  <tr>
    <th colspan="4" class="tg-center tg-bf">Bokingan Hari Biasa</th>
  </tr>
  <tr class="tg-even">
    <td>Jenis Kamar</td>
    <td>Harga</td>
    <td>Jumlah Kamar</td>
    <td>Jumlah</td>
  </tr>
  <tr>
    <td>Ekonomi</td>
    <td>Rp. 150.000</td>
    <td>5 kamar</td>
    <td>Rp. 750.000</td>
  </tr>
  <tr class="tg-even">
    <td>Standar</td>
    <td>Rp. 200.000</td>
    <td>5 kamar</td>
    <td>Rp. 1.000.000</td>
  </tr>
  <tr>
    <td>Standar AC</td>
    <td>Rp. 300.000</td>
    <td>4 kamar</td>
    <td>Rp. 1.200.000</td>
  </tr>
  <tr class="tg-even">
    <td>VIP/Family</td>
    <td>Rp. 350.000</td>
    <td>1 kamar</td>
    <td>Rp. 350.000</td>
  </tr>
</table>

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

.tg-table-paper {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.tg-table-paper td,
.tg-table-paper th {
  background-color: #F3F5EF;
  border: 1px #bbb solid;
  color: #333;
  font-family: sans-serif;
  font-size: 100%;
  padding: 10px;
  vertical-align: top;
}

.tg-table-paper...

JavaScript

$(document).ready(function() {
  $("table").wrap("<div class='table-responsive'></div>");
  $("table").addClass("table");
});