Cara membuat: Tabel responsif

Belajar cara membuat tabel responsif.

Tabel responsif

Jika layar terlalu kecil untuk menampilkan semua konten, tabel responsif akan menampilkan garis guling horizontal.

Silakan tingkatkan ukuran jendela browser untuk melihat efek:

Nama Depan Nama Belakang 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

Untuk membuat tabel responsif, tambahkan sebuah kontainer yang mengandung overflow-x:auto elemen kontainer:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Coba sendiri

Perhatian:Dalam OS X Lion (di Mac), garis guling secara default disembunyikan, hanya muncul saat digunakan (meskipun diatur "overflow:scroll" atau auto).

Halaman yang berhubungan

Tutorial:Tabel CSS