How TO - Responsive Tables
Learn how to create a responsive table.
Responsive Tables
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:
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
Jadi nantinya tabel akan berada didalam tag
Berikut ini adalah contoh kode supaya tabel yang kita buat menjadi Responsive
Table
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#satu {
width: 100%;
background-color: #00CCCC;
}
table#satu tr:nth-child[even] {
background-color: #00FFFF;
}
table#satu tr:nth-child[odd] {
background-color:#FFFF00;
}
table#satu th {
background-color: black;
color: white;
}
.res{
overflow-x:auto;
}
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