La tabella Bootstrap non riempie la larghezza del contenitore

Sto scrivendo un sito Web utilizzando bootstrap (3.3.2) con una semplice tabella su una delle pagine. Ho solo un pannello di intestazione semplice in un contenitore e un altro contenitore di contenuti con un titolo e una tabella. Per qualche motivo, il testo riempie la larghezza del contenitore, ma la tabella rimane allineata e copre solo la larghezza richiesta dal testo all'interno. Qualcuno ha qualche idea? So che posso aggiungere in un width = "100%" al tavolo, ma questo dovrebbe essere di default comportamento bootstrap ...La tabella Bootstrap non riempie la larghezza del contenitore

Acclamazioni

<html> 
    <head> 
    <title>Page title</title> 
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css"> 
    </head> 
    <body> 

    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="index.html">Home</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse" > 
      <ul class="nav navbar-nav"> 
      <li><a class="navbar-brand" href="modules.html">Modules</a></li> 
      <li><a class="navbar-brand" href="sites.html">Sites</a></li> 
      <li><a class="navbar-brand" href="search.html">Search</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 
     <div class="page-header"> 
     <h2>Why won't the table align!?</h2> 
     </div> 

     <div class="table-responsive"> 
     <table> 
      <thead> 
      <th>Head1</th><th>Head2</th><th>Head3</th> 
      </thead> 
      <tbody> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      <tr> 
       <td>Body1</td><td>Body2</td><td>Body3</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

fonte

2015-02-05 radpotato

Aggiungi 'tavolo-reattiva tabella' le classi al tag tavolo e Wrapp le tag nella tabella-header in il tag ! –

È perché non si stanno seguendo il Bootstrap documentation indications. Si deve avvolgere il vostro elemento table con .table classe in un involucro <div> con la classe .table-responsive, in questo modo:

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

fonte

2015-02-05 08:20:11 Guillaume

Sarò dannato! ... sicuramente non l'ho fatto in quel modo ogni volta ?? – Mayhem

Questa risposta è errata. Secondo i documenti su http://getbootstrap.com/css/#tables, la classe responsive alla tabella deve essere posizionata su un genitore che avvolge la tabella.

...

– somecallitblues

@somecallitblues Questa risposta è piuttosto vecchia e al momento della stesura è stata diversa, la aggiornerò. – Guillaume

Invece di usare:

<div class="table-responsive">

si dovrebbe usare:

<table class="table table-responsive">

JSFiddle

fonte

2015-02-05 08:20:54 atastrumf

In parole semplici !!

creare tabelle reattivi avvolgendo ogni .table in .table-responsive per farli scorrere orizzontalmente su dispositivi di piccole dimensioni (sotto 768px). Quando la visualizzazione di su un numero superiore a 768px di larghezza, non vedrai alcuna differenza in queste tabelle.

Quindi per le vostre esigenze .table e .table-responsive vi aiuterà.

fonte

2015-02-05 08:21:50 Junaid

Provare ad aggiungere "tabella" classe bootstraps al tag.

<table class="table"> 
     <thead> 
     <th>Head1</th><th>Head2</th><th>Head3</th> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     <tr> 
      <td>Body1</td><td>Body2</td><td>Body3</td> 
     </tr> 
     </tbody> 
    </table>

fonte

2015-02-05 08:26:29

La risposta accettata non è corretta. Per la documentazione

creare tabelle reattivi da avvolgendo qualsiasi .table in .table-sensibile per farli scorrere orizzontalmente su dispositivi di piccole dimensioni (sotto 768px). Quando visualizzi qualcosa di più largo di 768 px, non vedrai alcuna differenza in queste tabelle.

passa poi a mostrare corretto utilizzo

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

Si dovrebbe anche avere la classe .table sul <table>

http://getbootstrap.com/css/#tables-responsive

fonte

2017-02-25 05:21:29 dbinott

NOTA: Se si sta utilizzando bootstrap alpha v4, anche se il documentation dice che è possibile utilizzare:

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

dovevo ancora utilizzare la risposta accettata per farlo riempire la larghezza del contenitore:

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

fonte

2017-03-30 17:36:16 GuilPejon

La tabella Bootstrap non riempie la larghezza del contenitore

risposta

Problemi correlati