Bootstrap-Tabelle wird nicht gefüllt Containerbreite

Ich schreibe eine Website mit Bootstrap (3.3.2) mit einer einfachen Tabelle auf einer der Seiten. Ich habe nur ein einfaches Header-Panel in einem Container und einen weiteren Content-Container mit einem Titel und einer Tabelle. Aus irgendeinem Grund füllt Text die Breite des Containers aus, aber die linke Tabelle wird ausgerichtet und überspannt nur die Breite, die für den darin enthaltenen Text erforderlich ist. Hat jemand Ideen? Ich weiß, dass ich in einer width = „100%“ die Tabelle hinzufügen kann, aber das Bootstrap-Verhalten ...Bootstrap-Tabelle wird nicht gefüllt Containerbreite

Prost

<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>

Quelle

2015-02-05 radpotato

die Tisch Tisch-responsive 'auf den Tisch Tag und Wrapp die -Tags in der Tabelle-Header-Klassen hinzufügen in das Tag! –

Standard werden soll Es ist, weil Sie nicht die Bootstrap documentation indications folgen. Sie haben Ihre table Element mit .table Klasse in einem Wrapper <div> mit der .table-responsive Klasse wickeln, wie folgt aus:

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

Quelle

2015-02-05 08:20:11 Guillaume

ich werde verdammt sein! ... sicherlich habe ich es nicht jedes Mal so gemacht ?? – Mayhem

Diese Antwort ist falsch. Laut Dokumentation unter http://getbootstrap.com/css/#tables muss die auf Tabellen reagierende Klasse auf einem übergeordneten Element platziert werden, das die Tabelle umschließt.

...

– somecallitblues

@somecallitblues Diese Antwort ist ziemlich alt, und zum Zeitpunkt des Schreibens war es anders, ich werde es aktualisieren. – Guillaume

Statt mit:

<div class="table-responsive">

Sie verwenden sollten:

<table class="table table-responsive">

JSFiddle

Quelle

2015-02-05 08:20:54 atastrumf

In den meisten einfachen Worten !!

ansprechende Tabellen erstellen mit einem .table in .table-responsive Verpackung, um sie horizontal auf kleine Geräte zu machen blättern (unter 768px). Wenn auf etwas größer als 768px weit angezeigt wird, sehen Sie keinen Unterschied in diesen Tabellen.

So für Ihre Anforderung .table und .table-responsive wird Ihnen helfen.

Quelle

2015-02-05 08:21:50 Junaid

Versuchen Sie, dem Tag die Bootstrap-Klasse "table" hinzuzufügen.

<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>

Quelle

2015-02-05 08:26:29

Die angenommene Antwort ist falsch. Per docs

ansprechende Tabellen Erstellen von jede .table in .table ansprechende Verpackung, um sie horizontal auf kleinen Geräten zu machen blättern (unter 768px). Wenn Sie auf etwas größer als 768px weit sehen, sehen Sie keinen Unterschied in diesen Tabellen.

Dann auf ordnungsgemäße Verwendung

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

Sie sollten auch haben die .table Klasse auf dem <table>

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

Quelle

2017-02-25 05:21:29 dbinott

HINWEIS geht zu zeigen: Wenn Sie Bootstrap v4 alpha verwenden, obwohl die documentation sagt, dass Sie verwenden können:

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

ich hatte immer noch die akzeptierte Antwort zu verwenden, um es die Breite des Behälters zu machen füllen:

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

Quelle

2017-03-30 17:36:16 GuilPejon

Bootstrap-Tabelle wird nicht gefüllt Containerbreite

Antwort

Verwandte Themen