Como exibir tabelas no celular usando Bootstrap?

90

Minhas tabelas exibem bem no desktop, mas quando tento visualizar a versão móvel, minha tabela acaba ficando muito larga para a tela do dispositivo móvel. Estou usando um layout responsivo.

Como posso definir larguras de mesa para visualização móvel? Que outras alternativas existem para apresentar dados tabulares em visualizações móveis usando Bootstrap?

twitter-bootstrap twitter-bootstrap-3 ganders
fonte
2
Percebi que o Bootstrap 3.0 será "móvel primeiro". Alguém acha que eles vão resolver esse "problema" das mesas móveis?
As tabelas ainda parecem as mesmas no Bootstrap 3. :(
Giles Roberts
1
@GilesRoberts Se por "o mesmo no Bootstrap 3" você quer dizer "agora responsivo no Bootstrap 3", então sim, eles são iguais .
ta.speot.is
@ ta.speot.is Eles são melhores agora do que nos candidatos a lançamento. Todos os exemplos lá, entretanto, têm apenas 4 colunas. Ainda não funciona muito bem para mesas largas. Acabei usando uma solução com uma primeira coluna fixa e todo o resto rolando.
Giles Roberts,
@ ta.speot.is Acabei de ver sua resposta abaixo. Perdeu que o Bootstrap 3 tem uma classe responsiva à tabela. Funciona bem se você não precisa que certas colunas estejam sempre visíveis.
Giles Roberts,

Respostas:

122

O Bootstrap 3 apresenta tabelas responsivas :

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

O Bootstrap 4 é semelhante, mas com mais controle por meio de algumas novas classes :

... responsivo em todas as janelas de exibição ... com .table-responsive. Ou escolha um ponto de interrupção máximo para ter uma tabela responsiva usando .table-responsive{-sm|-md|-lg|-xl}.

Agradecemos a Jason Bradley por fornecer um exemplo:

Tabelas responsivas

ta.speot.is
fonte
6
Obrigado. Como 99,9% das pessoas, não me preocupei em ler a documentação da atualização. Eu acho que deveria.
David Bélanger
1
Na verdade, é! Além disso, ele está fazendo o que eu queria em primeiro lugar, então para mim é um 2 em 1!
David Bélanger
O que exatamente a table-responsiveclasse faz? A documentação do bootstrap diz "para fazê-los rolar horizontalmente", mas não noto nenhuma diferença relacionada à rolagem. A única diferença que noto é que a mesa fica com bordas externas quando sob um determinado tamanho de tela ( como visto no exemplo ).
Dennis
5
@ ta.speot.is Percebi que li a documentação incorretamente e estava usando a classe incorretamente. Eu estava adicionando .table-responsiveà própria mesa (por exemplo <table class="table table-responsive">), em vez de embrulhar a mesa .table-responsive, o que você até mesmo apontou em seu exemplo.
Dennis
1
@PirateApp Use hidden-*nos tds das colunas que você deseja ocultar getbootstrap.com/docs/3.3/css/#responsive-utilities
ta.speot.is
68

Você também pode tentar uma dessas abordagens, uma vez que tabelas maiores não são exatamente amigáveis ​​em dispositivos móveis, mesmo que funcione:

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

Tenho preferência por 'No More Tables', mas isso obviamente depende da sua aplicação.

Acordes
fonte
3
Link fantástico e três soluções realmente ótimas! Tive de pesquisar no Google o caminho de volta a esta questão apenas para votar positivamente em sua resposta. Obrigado!
Simon
2
Uma resposta que consiste apenas em um link é uma má etiqueta do Stack Overflow. A página pode desaparecer, o conteúdo da página pode ser alterado, a resposta não fica imediatamente visível, a resposta não pode ser melhorada e assim por diante. BTW, o link não aponta mais para o conteúdo correto.
Dennis
Concordo, mas por enquanto: web.archive.org/web/20130725223053/http://elvery.net/demo/…
Chords
1
@Dennis está certo. Elabore sua resposta para resumir o que está no link e mantenha o link também para demos e mais detalhes. Mesmo assim, você recebeu meu voto positivo, pois o link é muito interessante. Felicidades.
Mario Awad