Le tabelle reattive di Bootstrap 4 non occuperanno la larghezza del 100%

96

Sto costruendo un'app web usando Bootstrap 4 e riscontro alcuni strani problemi. Voglio utilizzare la classe di risposta alle tabelle di Bootstrap per consentire lo scorrimento orizzontale delle tabelle sui dispositivi mobili. Sui dispositivi desktop, la tabella dovrebbe occupare il 100% della larghezza del DIV contenitore.

Non appena applico la classe .table-responsive alla mia tabella, la tabella si restringe orizzontalmente e non occupa più il 100% della larghezza. Qualche idea?

Ecco il mio markup:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Se applico una larghezza del 100% alla classe .table-responsive, rende la tabella stessa larga al 100% ma gli elementi figlio (TBODY, TR, ecc.) Sono ancora stretti.

css  bootstrap-4 
— codice mangiare sonno
fonte

Risposte:

158

Quanto segue NON FUNZIONA. Causa un altro problema. Ora avrà una larghezza del 100% ma non sarà reattivo su dispositivi più piccoli:

.table-responsive {
    display: table;
}

Tutte queste risposte hanno introdotto un altro problema raccomandando display: table;. L'unica soluzione al momento è usarlo come wrapper:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
— John FatBoy Doeeee Rolla
fonte
2
Agitato con questo per sempre, troppo presto per pensare di avvolgerlo semplicemente. Sei l'uomo
— JSF
Usare la table-responsiveclasse come wrapper ricorda Bootstrap 3 ...? Sono contento che per ora ci sia una soluzione! Bootstrap 4 Alpha ;-)
— Steve Meisner
Non vedendo questo lavoro con beta. Sembra che dovrai rimuovere il div e aggiungere "table-responsive" lungo "table". In questo modo .. <table class = "table table-responsive">
— Winnemucca
questo problema non è stato ancora risolto in bootstrap 4, anche se una parte concorda con la tua risposta, le istruzioni di migrazione da bootstrap 3 a 4 affermano: "le tabelle reattive non richiedono più un elemento di wrapping. Invece, metti semplicemente il .table-responsive proprio sul <table>. "... trovato qui: getbootstrap.com/docs/4.0/migration/#tables
— Marin
Funziona perfettamente per me nella versione 4.3.1! Grazie
— Ibrahim Isa
38

Questa soluzione ha funzionato per me:

aggiungi semplicemente un'altra classe nel tuo elemento tabella: w-100 d-block d-md-table

quindi sarebbe: <table class="table table-responsive w-100 d-block d-md-table">

per bootstrap 4 w-100imposta la larghezza al 100% d-block(display: block) ed-md-table (display: table on min-width: 576px)

Bootstrap 4 mostra i documenti

— Faytraneozter
fonte
2
Funziona per Bootstrap4 Beta! La chiave era w-100. grazie.
— ObjectiveTC
Questa soluzione non ha lo stesso effetto del semplice fare <table class="table table-responsive-md">?
— JamesWilson
20

Se stai usando la V4.1 e secondo i loro documenti, non assegnare .table-responsive direttamente alla tabella. La tabella dovrebbe essere .table e se vuoi che sia scorrevole orizzontalmente (responsive) aggiungila all'interno di un contenitore .table-responsive (a <div>, per esempio).

Le tabelle reattive consentono di scorrere le tabelle orizzontalmente con facilità. Rendi reattiva qualsiasi tabella in tutte le viste avvolgendo un .table con .table-responsive.

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

in questo modo, non è necessario alcun CSS aggiuntivo.

Nel codice dell'OP, .table-responsive può essere utilizzato insieme a .col-md-12 all'esterno.

— Marcelo Myara
fonte
3
Questa dovrebbe essere la risposta giusta poiché la versione stabile di bootstrap. Thx
— Peter,
2
Questa è la risposta. Grazie
— Gjaa
1
Risposta corretta!
— Andrew Schultz
6

Per qualche motivo la tabella reattiva in particolare non si comporta come dovrebbe. Puoi ripararlo sbarazzandoti didisplay:block;

.table-responsive {
    display: table;
}

Potrei presentare una segnalazione di bug.

Modificare:

È un bug esistente.

— Serg Chernata
fonte
5

Nessuna di queste risposte funziona (data oggi 9 dicembre 2018). La risoluzione corretta qui è aggiungere .table-responsive-sm alla tua tabella:

<table class='table table-responsive-sm'>
[Your table]
</table>

Questo applica l'aspetto della reattività solo alla vista SM (mobile). Quindi nella visualizzazione mobile si ottiene lo scorrimento come desiderato e nelle visualizzazioni più grandi la tabella non è reattiva e quindi visualizzata a tutta larghezza, come desiderato.

Documenti: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

— SongBox
fonte
2

La soluzione compatibile con la v4 del framework è impostare il punto di interruzione appropriato. Invece di utilizzare .table-responsive, dovresti essere in grado di utilizzare .table-responsive-sm (per essere solo reattivo su piccoli dispositivi)

Puoi utilizzare uno qualsiasi degli endpoint disponibili: table-responsive {-sm | -md | -lg | -xl}

— Rubén_ic
fonte
1

Questo perché la .table-responsiveclasse aggiunge la proprietà display: blockal tuo elemento che la cambia rispetto al precedente display: table.

Sostituisci questa proprietà display: tablenel tuo foglio di stile

.table-responsive {
    display: table;
}

Nota: assicurati che questo stile venga eseguito dopo il codice di bootstrap affinché venga sovrascritto.

— Nikhil Nanjappa
fonte
1

È causato dalla table-responsiveclasse che assegna alla tabella una proprietà di display:block, il che è strano perché questo sovrascrive le tableclassi originali display:tableed è il motivo per cui la tabella si restringe quando aggiungitable-responsive .

Molto probabilmente è fino a bootstrap 4 ancora in dev. Sei sicuro di sovrascrivere questa proprietà con la tua classe che imposta display:tablee non influenzerà la reattività della tabella.

per esempio

.table-responsive-fix{
   display:table;
}
— Callum
fonte
1

Prendendo in considerazione le altre risposte farei qualcosa del genere, grazie!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— Alexis
fonte
1

Crea tabelle reattive racchiudendo qualsiasi .table con .table-responsive {-sm | -md | -lg | -xl}, facendo scorrere la tabella orizzontalmente a ciascun punto di interruzione di larghezza massima fino a (ma non incluso) 576px, 768px, 992px e 1120px, rispettivamente.

basta avvolgere la tabella con .table-responsive {-sm | -md | -lg | -xl}

per esempio 

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

bootstrap 4 tabelle

— iMezied
fonte
0

Ho scoperto che l'utilizzo della classe di risposta alla tabella consigliata in un wrapper causa ancora la riduzione (sorprendentemente) orizzontale delle tabelle reattive:

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

La soluzione per me era creare i seguenti punti di interruzione e classi multimediali per impedirlo:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Quindi posso aggiungere la classe appropriata al mio elemento di tabella. Per esempio:

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

Qui il wrapper imposta la larghezza al 100% per grandi e maggiori per Bootstrap. Con la classe table-lg applicata all'elemento table, anche la larghezza della tabella è impostata su 100% per grandi e maggiori, ma su 992px per medi e piccoli. Le classi table-xs, table-sm, table-md e table-xl funzionano allo stesso modo.

— ScottyB
fonte
0

Per Bootstrap 4.x utilizzare le utilità di visualizzazione:

w-100 d-print-block d-print-table

Utilizzo :

<table class="table w-100 d-print-block d-print-table">
— Bora
fonte
0

Sembra che l'elemento "sr-only" ei suoi stili all'interno della tabella siano la causa di questo bug. Almeno ho avuto lo stesso problema e dopo mesi passati a sbattere la testa contro il muro è quello che abbiamo determinato la causa, anche se ancora non capisco perché. L'aggiunta left:0agli stili "solo sr" lo ha risolto.

— Bryn Newell
fonte
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.