Bagaimana untuk membuat: Tabel responsif

Belajar bagaimana untuk membuat tabel responsif.

Tabel responsif

Jika skrin terlalu kecil untuk memaparkan semua kandungan, tabel responsif akan memaparkan palang gerak horizontal.

Tukar saiz tetingkap pelayar untuk lihat kesan:

Nama Pertama Keluarga Nama 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 sebarang yang mengandungi overflow-x:auto elemen wadah:

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

Cuba sendiri

Pertimbangan:Dalam OS X Lion (Mac), palang gerak secara lalai di sembunyi, hanya dipaparkan semasa digunakan (walaupun diatur "overflow:scroll" atau auto).

相关页面

教程：CSS 表格