Thursday, October 26, 2017

Membuat Tabel Responsive dengan bootstrap


Hai... Jumpai lagi..
Kali ini saya akan membuat saya membuat tutorial bagaimana cara membuat tabel responsive menggunakan bootstrap pada perangkat yang kecil atau mempunyai ukuran setara atau lebih kecil dari 768px, maka akan terdapat scroll yang secara horizontal.
Dalam pembuatan tabel responsive di bootstrap, ada beberapa class untuk membuat berbagai style atau bentuk pada tabel yang akan dibuat. beberapa perbedaan tabel :

dan dari beberapa class diatas ada juga class untuk mengubah warna setiap kolom dan baris pada tabel. Class ini dapat digunakan sesuai dengan kebutuhan. Untuk dapat lebih memahaminya, anda dapat menerapkan script dibawah ini.


Dalam pembuatan tabel, file bootstrap yang dibutuhkan adalah

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/css/table-responsive.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script css letakkan setelah <head> dan sebelum </head>
Gimana gan, cukup mudah bukan ?. Semoga bermanfaat !

1 comment:

  1. Terimakasih gan, ini sangat membantu program saya.
    udah lama saya coba cari cara membuat tabel responsive ini.

    ReplyDelete