Tabel Responsif CSS
Tabel Responsif
Tabel responsif akan menampilkan bilah gulir horizontal jika layar terlalu kecil untuk menampilkan konten lengkap:
Nama depan | Nama keluarga | 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 |
malam | Jackson | 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 |
Tambahkan elemen penampung (seperti <div>) overflow-x:auto
di sekitar elemen <table> untuk membuatnya responsif:
Contoh
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
Catatan: Di OS X Lion (di Mac), bilah gulir disembunyikan secara default dan hanya ditampilkan saat digunakan (meskipun "overflow:scroll" disetel).
Lebih Banyak Contoh
Contoh ini menunjukkan cara membuat meja mewah.
Contoh ini menunjukkan cara memposisikan judul tabel.
Properti Tabel CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |