Tratamento responsivo de tabelas no Twitter Bootstrap

84

Quando a largura de uma tabela excede a largura do intervalo, como esta página: http://jsfiddle.net/rcHdC/

Você verá que o conteúdo da tabela está fora do span.

Qual seria o melhor método para atender a esse caso?

html twitter-bootstrap css Ryan
fonte
O que você gostaria que acontecesse?
cimmanon

Respostas:

153

O Bootstrap 3 agora tem tabelas responsivas prontas para usar. Hooray! :)

Você pode conferir aqui: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Adicione um <div class="table-responsive">contorno à sua mesa e você estará pronto para ir:

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

Para que funcione em todos os layouts, você pode fazer o seguinte:

.table-responsive
{
    overflow-x: auto;
}
Leniel Maccaferri
fonte
7
Mas só se aplica a dispositivos pequenos (abaixo de 768px): S Fonte: getbootstrap.com/css/#tables-responsive
VSP
1
Para habilitar isso em layouts de todos os tamanhos, você pode simplesmente descartar os estilos responsivos do bloco 768 no arquivo foundation_and_overrides.css.scss. Algo como `` `.table-responsive {width: 100%; overflow-y: oculto; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } `` `
genkilabs
3
@ ase69s verifique minha resposta atualizada. Agora eu precisava disso em uma mesa com muitas colunas. Adicionar overflow-x: autoum CSSarquivo personalizado resolve o problema em layouts de exibição maiores.
Leniel Maccaferri
Você pode querer adicionar a fronteira nessa definição de sistema também, para consistência:border: 1px solid #dddddd;
ptim
2
Também pode ser necessário adicionar .table-responsive td, .table-responsive th { white-space:nowrap; }para garantir que as células não diminuam automaticamente e adicionem quebras de linha.
rybo111
18

Há muitas coisas diferentes que você pode fazer ao lidar com tabelas responsivas.

Pessoalmente, gosto dessa abordagem de Chris Coyier:

Você pode encontrar muitas outras alternativas aqui:

Se você pode aproveitar o Bootstrap e obter algo rapidamente, pode simplesmente usar os nomes de classe ".hidden-phone" e ".hidden-tablet" para ocultar algumas linhas, mas essa abordagem pode ser a melhor em muitos casos. Mais informações (consulte "Classes de utilitários responsivos"):

Luis Evrythng
fonte
5
1 para o Coyer Link. Eu usei isso no passado com grande efeito.
Fetchez la vache de
Sim, a solução de Chris Coyer é muito legal. Muito mais agradável do que o fornecido pelo bootstrap ou zurbfoundation (eles simplesmente adicionam rolagem horizontal).
Adrien Be
A partir de agora, janeiro de 2016, o material responsivo de Coyier e outros está entre 5 e 6 anos, antes de todos começarem a usar o Twitter Bootstrap.
Andrew Koper
1

Se você estiver usando o Bootstrap 3 e Less, poderá aplicar as tabelas responsivas a todas as resoluções atualizando o arquivo:

tables.less

ou sobrescrevendo esta parte:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Com:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Observe como alterei o valor da primeira linha @ screen-XX.

Sei que tornar todas as tabelas responsivas pode não parecer muito bom, mas achei extremamente útil ter isso habilitado para LG em tabelas grandes (muitas colunas).

Espero que ajude alguém.

Mauricio
fonte