A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:
First Name
Last Name
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Points
Jill
Smith
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
50
Eve
Jackson
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
94
Adam
Johnson
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
To create a responsive table, add a container element with overflow-x:auto around the
:
Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" or auto is set).
Tip: Go to our CSS Tables Tutorial to learn more about how to style tables.
Sebelum belajar Cara Mudah Membuat Tabel Responsive maka terlebih dahulu kita harus Belajar Membuat Tabel HTML terlebih dahulu. Tampilan Responsive dalam dunia website sekarang ini seperti menjadi sebuah keharusan, tampilan
responsive bisa meliputi berbagai hal, seperti tampilan navigasinya, body, sidebar, tabel, dan umumnya semua konten yang berada dalam website diatur sedemikian rupa agar tampil responsive. Responsive saya artikan dengan sederhana yaitu tampilan akan tetap utuh/tidak berubah ketika diakses menggunakan berbagai perangkat dengan ukuran layar yang berbeda – beda.
Teknik membuat tabel responsive bisa menggunakan berbagai cara, namun disini Saya ingin menjelaskan cara termudahnya untuk membuat tabel
responsive. Konsep dasarnya sangat sederhana yaitu menambahkan overflow-x:auto; pada tag
, sehingga kurng lebih kodenya seperti ini
……………………………….
Jadi nantinya tabel akan berada didalam tag
. Sebenarnya ini khusus untuk tabel – tabel yang memiliki jumlah data yang besar, sehingga nanti akan muncul sebuah scroll geser di bawah tabel ketika layar pengguna tidak
bisa menampilkan tabel secara keseluruhan. Supaya penggunaanya lebih mudah, saya akan membuatnya dalam sebuah class, misal .res{ overflow-x:auto} sehingga nanti tinggal memanggilnya melalui tag
Berikut ini adalah contoh kode supaya tabel yang kita buat menjadi Responsive
Table
Nama Depan
Nama Belakang
Umur
Hobi
Pekerjaan
Status
Andi
Dadan
30
Petani
Peternak
Menikah
Dinda
Sonia
19
Petani
Peternak
Menikah
Ahmad
Salsa
25
Petani
Peternak
Menikah
Nama Depan
Nama Belakang
Umur
Hobi
Pekerjaan
Status
Andi
Dadan
30
Petani
Peternak
Menikah
Dinda
Sonia
19
Petani
Peternak
Menikah
Ahmad
Salsa
25
Petani
Peternak
Menikah
Bila script diatas dieksekui oleh browser maka akan tampil seperti berikut
Bisa Anda bandingkan sendiri
antara tabel A dengan tabel B, tabel A ketika layar diperkecil datanya tidak terlihat semua sedangkan tabel B datanya bisa dilihat semua karena dibawahnya terdapat scroll yang bisa digeser untuk melihat data
Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel