Bagaimana cara menampilkan tabel di ponsel menggunakan Bootstrap?

90

Tabel saya ditampilkan dengan baik di desktop, tetapi begitu saya mencoba melihat versi seluler, tabel saya menjadi terlalu lebar untuk layar perangkat seluler. Saya menggunakan tata letak responsif.

Bagaimana cara mengatur lebar tabel untuk tampilan seluler? Alternatif lain apa yang ada untuk menyajikan data tabel pada tampilan seluler menggunakan Bootstrap?

twitter-bootstrap twitter-bootstrap-3 ganders
sumber
2
Saya melihat bahwa Bootstrap 3.0 akan menjadi "mobile first." Adakah yang mengira mereka akan menyelesaikan "masalah" tabel seluler ini?
Tabel tampaknya masih sama di Bootstrap 3. :(
Giles Roberts
1
@GilesRoberts Jika dengan "sama di Bootstrap 3" maksud Anda "sekarang responsif di Bootstrap 3" maka ya, mereka sama .
ta.speot. Tanggal
@ ta.speot.is Mereka sekarang lebih baik daripada di kandidat rilis. Semua contoh ada meski hanya memiliki 4 kolom. Masih tidak berfungsi dengan baik untuk tabel lebar. Saya akhirnya menggunakan solusi dengan kolom pertama tetap dan sisanya bergulir.
Giles Roberts
@ ta.speot.is Baru saja melihat jawaban Anda di bawah ini. Merindukan bahwa Bootstrap 3 memiliki kelas yang responsif terhadap tabel. Berfungsi dengan baik jika Anda tidak membutuhkan kolom tertentu untuk selalu terlihat.
Giles Roberts

Jawaban:

123

Bootstrap 3 memperkenalkan tabel responsif :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Bootstrap 4 serupa, tetapi dengan lebih banyak kontrol melalui beberapa kelas baru :

... responsif di semua area pandang ... dengan .table-responsive. Atau, pilih breakpoint maksimum yang dapat digunakan untuk membuat tabel responsif dengan menggunakan .table-responsive{-sm|-md|-lg|-xl}.

Penghargaan untuk Jason Bradley karena memberikan contoh:

Tabel Responsif

ta.speot.is
sumber
6
Terima kasih. Seperti 99,9% orang, saya tidak repot-repot membaca dokumentasi pembaruan. Saya kira saya harus melakukannya.
David Bélanger
1
Memang itu ! Plus, itu melakukan apa yang saya inginkan di tempat pertama jadi bagi saya ini adalah 2 in 1!
David Bélanger
Apa sebenarnya yang dilakukan table-responsivekelas itu? Dokumen bootstrap mengatakan "untuk membuat mereka menggulir secara horizontal", tetapi saya tidak melihat perbedaan terkait dengan pengguliran. Satu-satunya perbedaan yang saya perhatikan adalah bahwa tabel mendapat batas di luar ketika di bawah ukuran layar tertentu ( seperti yang terlihat pada contoh ).
Dennis
5
@ ta.speot.is Saya menyadari bahwa saya salah membaca dokumentasi dan menggunakan kelas secara tidak benar. Saya menambahkan .table-responsiveke tabel itu sendiri (misalnya <table class="table table-responsive">), daripada membungkus tabel .table-responsive, yang bahkan Anda tunjukkan dalam contoh Anda.
Dennis
1
@PirateApp Gunakan hidden-*pada tdkolom yang ingin Anda sembunyikan getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

Anda juga dapat mempertimbangkan untuk mencoba salah satu pendekatan ini, karena tabel yang lebih besar tidak sepenuhnya ramah pada perangkat seluler meskipun berhasil:

http://elvery.net/demo/responsive-tables/

Saya lebih memilih 'No More Tables' tetapi itu jelas tergantung pada aplikasi Anda.

Chords
sumber
3
Tautan fantastis dan tiga solusi hebat! Saya harus mencari cara Google untuk kembali ke pertanyaan ini hanya untuk memberi suara positif pada jawaban Anda. Terima kasih!
Simon
2
Jawaban yang hanya terdiri dari tautan adalah etiket Stack Overflow yang buruk. Halaman bisa hilang, konten di halaman bisa berubah, jawaban tidak langsung terlihat, jawaban tidak bisa diperbaiki, dan sebagainya. BTW tautan tidak lagi mengarah ke konten yang benar.
Dennis
Setuju, tapi untuk saat ini: web.archive.org/web/20130725223053/http://elvery.net/demo/…
Chords
1
@ Dennis benar. Harap uraikan jawaban Anda untuk meringkas apa yang ada di tautan dan simpan juga tautan untuk demo dan detail lebih lanjut. Anda mendapatkan upvote saya tetap karena tautannya sangat menarik. Bersulang.
Mario Awad