Cara - Tabel Responsif
Pelajari cara membuat tabel responsif.
Tabel Responsif
Tabel responsif akan menampilkan bilah gulir horizontal jika layar terlalu kecil untuk menampilkan konten lengkap. Ubah ukuran jendela browser untuk melihat efeknya:
Nama depan | Nama keluarga | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin | Poin |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Jill | Smith | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
malam | 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 |
Untuk membuat tabel responsif, tambahkan elemen penampung overflow-x:auto
di sekitar <table>:
Contoh
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
Catatan: Di OS X Lion (di Mac), bilah gulir disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun "overflow:scroll" atau otomatis diatur).
Tip: Buka Tutorial Tabel CSS kami untuk mempelajari lebih lanjut tentang cara menata tabel.