Come visualizzare le tabelle su dispositivi mobili utilizzando Bootstrap?

90

Le mie tabelle vengono visualizzate bene sul desktop, ma una volta che provo a visualizzare la versione mobile la mia tabella finisce per essere troppo ampia per lo schermo del dispositivo mobile. Sto usando un layout reattivo.

Come posso impostare le larghezze della tabella per la visualizzazione mobile? Quali altre alternative ci sono per presentare dati tabulari sulle visualizzazioni mobili utilizzando Bootstrap?

twitter-bootstrap  twitter-bootstrap-3 
— ganders
fonte
2
Ho notato che Bootstrap 3.0 sarà "mobile first". Qualcuno pensa che risolveranno questo "problema" dei tavoli mobili?
Le tabelle sembrano ancora essere le stesse in Bootstrap 3. :(
— Giles Roberts
1
— ta.speot.is
@ ta.speot.is Stanno meglio adesso che nelle release candidate. Tutti gli esempi presenti hanno però solo 4 colonne. Ancora non funziona molto bene per tavoli larghi. Ho finito per utilizzare una soluzione con una prima colonna fissa e tutto il resto a scorrimento.
— Giles Roberts
@ ta.speot.is Ho appena visto la tua risposta qui sotto. Ho perso che Bootstrap 3 ha una classe che risponde alla tabella. Funziona bene se non hai bisogno che determinate colonne siano sempre visibili.
— Giles Roberts

Risposte:

122

Bootstrap 3 introduce tabelle reattive :

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

Bootstrap 4 è simile, ma con più controllo tramite alcune nuove classi :

... reattivo in tutti i viewport ... con .table-responsive. In alternativa, scegli un punto di interruzione massimo con cui avere una tabella reattiva fino a utilizzando .table-responsive{-sm|-md|-lg|-xl}.

Ringraziamo Jason Bradley per aver fornito un esempio:

Tabelle reattive

— ta.speot.is
fonte
6
Grazie. Come il 99,9% delle persone, non mi sono preoccupato di leggere la documentazione dell'aggiornamento. Credo che avrei dovuto.
— David Bélanger
1
Certo che lo è ! Inoltre, sta facendo quello che volevo in primo luogo, quindi per me è un 2 in 1!
— David Bélanger
Cosa fa esattamente la table-responsiveclasse? La documentazione di Bootstrap dice "per farli scorrere in orizzontale", ma non noto una differenza relativa allo scorrimento. L'unica differenza che noto è che la tabella ha i bordi all'esterno quando è inferiore a una certa dimensione dello schermo ( come mostrato nell'esempio ).
— Dennis
5
@ ta.speot.is Mi sono reso conto di aver letto male la documentazione e di aver utilizzato la classe in modo errato. Stavo aggiungendo .table-responsivealla tabella stessa (ad esempio <table class="table table-responsive">), invece di avvolgere la tabella .table-responsive, cosa che hai persino indicato nel tuo esempio.
— Dennis
1
@PirateApp Usa hidden-*sulle tdcolonne che vuoi nascondere getbootstrap.com/docs/3.3/css/#responsive-utilities
— ta.speot.is
68

Potresti anche considerare di provare uno di questi approcci, poiché i tavoli più grandi non sono esattamente amichevoli sui dispositivi mobili anche se funziona:

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

Sono parziale a "No More Tables", ma questo ovviamente dipende dalla tua applicazione.

— Accordi
fonte
3
Collegamento fantastico e tre soluzioni davvero fantastiche! Ho dovuto tornare su Google a questa domanda solo per votare la tua risposta. Grazie!
— Simon
2
Una risposta che consiste esclusivamente in un collegamento è una cattiva etichetta di Stack Overflow. La pagina potrebbe scomparire, il contenuto della pagina può cambiare, la risposta non è immediatamente visibile, la risposta non può essere migliorata e così via. BTW il collegamento non punta più al contenuto corretto.
— Dennis
— Accordi
1
@ Dennis ha ragione. Per favore elabora la tua risposta per riassumere cosa c'è nel link e mantieni il link anche per demo e ulteriori dettagli. Tuttavia, ottieni il mio voto positivo perché il link è molto interessante. Saluti.
— Mario Awad
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.