Gestione reattiva delle tabelle in Twitter Bootstrap

84

Quando la larghezza di una tabella supera la larghezza dello span, come questa pagina: http://jsfiddle.net/rcHdC/

Vedrai che il contenuto della tabella è al di fuori di span.

Quale sarebbe il metodo migliore per soddisfare questo caso?

html twitter-bootstrap css

— Ryan
fonte

Cosa vorresti che accadesse?

— cimmanon

153

Bootstrap 3 ora ha tabelle reattive fuori dagli schemi. Evviva! :)

Puoi verificarlo qui: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Aggiungi un <div class="table-responsive">contorno al tuo tavolo e dovresti essere a posto:

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

Per farlo funzionare su tutti i layout puoi farlo:

.table-responsive
{
    overflow-x: auto;
}

— Leniel Maccaferri
fonte

7

Ma si applica solo a piccoli dispositivi (meno di 768 px): S Fonte: getbootstrap.com/css/#tables-responsive

— VSP

1

Per abilitarlo su tutti i layout di dimensione, puoi semplicemente rilasciare gli stili reattivi dal blocco 768 nel file foundation_and_overrides.css.scss. Qualcosa come `` .table-responsive {width: 100%; overflow-y: nascosto; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } `` `

— genkilabs

3

@ ase69s controlla la mia risposta aggiornata. Proprio ora ne avevo bisogno su una tabella con molte colonne. L'aggiunta overflow-x: autodi un CSSfile personalizzato fa il trucco per i layout di visualizzazione più grandi.

— Leniel Maccaferri

Potresti anche aggiungere il bordo alla definizione dello stile, per coerenza:border: 1px solid #dddddd;

— ptim

2

Potrebbe anche voler aggiungere .table-responsive td, .table-responsive th { white-space:nowrap; }per garantire che le celle non si restringano automaticamente e aggiungere interruzioni di riga.

— rybo111

21

Un'opzione disponibile è fooTable. Funziona alla grande su un sito Web reattivo e ti consente di impostare più punti di interruzione ... fooTable Link

— Gfw
fonte

FooTable è ora progettato per funzionare con Twitter Bootstrap fuori dagli schemi.

— shasi kanth

18

Ci sono molte cose diverse che puoi fare quando hai a che fare con tabelle reattive.

Personalmente mi piace questo approccio di Chris Coyier:

http://css-tricks.com/responsive-data-tables/

Puoi trovare molte altre alternative qui:

Se puoi sfruttare Bootstrap e ottenere qualcosa velocemente, puoi semplicemente usare i nomi delle classi ".hidden-phone" e ".hidden-tablet" per nascondere alcune righe, ma questo approccio potrebbe essere il migliore in molti casi. Ulteriori informazioni (vedere "Classi di utilità reattive"):

http://twitter.github.io/bootstrap/scaffolding.html#responsive

— Luis Evrythng
fonte

5

+1 per Coyer Link. L'ho usato in passato con grande effetto.

— Fetchez la vache

Sì, la soluzione di Chris Coyer è molto chiara. Molto più carino di quello fornito da bootstrap o zurbfoundation (aggiungono semplicemente lo scorrimento orizzontale).

— Adrien Be

A partire da ora, gennaio 2016, il materiale reattivo di Coyier e di altri ha 5-6 anni, prima che tutti iniziassero a utilizzare Twitter Bootstrap.

— Andrew Koper

1

Se stai usando Bootstrap 3 e Less puoi applicare le tabelle reattive a tutte le risoluzioni aggiornando il file:

tables.less

o sovrascrivendo questa 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;
          }
        }
      }
    }
  }
}

Con:

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

Nota come ho cambiato la prima riga @ screen-XX valore.

So che rendere reattive tutte le tabelle potrebbe non sembrare così buono, ma ho trovato estremamente utile averlo abilitato fino a LG su tabelle di grandi dimensioni (molte colonne).

Spero che aiuti qualcuno.

— Mauricio
fonte