La table Bootstrap ne remplira pas la largeur du conteneur

j'écris un site Web en utilisant bootstrap (3.3.2) avec une table simple sur une des pages. J'ai juste un simple panneau d'en-tête dans un récipient, et un autre conteneur de contenu avec un titre et une table. Pour une raison quelconque, le texte remplit la largeur du conteneur, mais la table gauche s'aligne et ne s'étend que la largeur requise par le texte à l'intérieur. N'importe qui ont des idées? Je sais que je peux ajouter un width="100%" à la table, mais ce doit être par défaut bootstrap comportement...

Cheers

<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>
24
demandé sur radpotato 2015-02-05 11:13:52
la source

6 ответов

c'est parce que vous ne suivez pas le Bootstrap documentation indications. Vous avez de l'envelopper votre table élément avec .table classe dans un wrapper <div>.table-responsive classe, comme ceci:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
49
répondu Guillaume 2017-03-03 11:16:08
la source

NOTE: Si vous utilisez bootstrap v4 alpha, même si le documentation dit que vous pouvez utiliser:

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

j'ai quand même dû utiliser la réponse acceptée pour remplir la largeur du conteneur:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
22
répondu GuilPejon 2017-03-30 20:36:16
la source

au Lieu d'utiliser:

<div class="table-responsive">

vous devez utiliser:

<table class="table table-responsive">

JSFiddle

2
répondu atastrumf 2015-02-05 11:20:54
la source

essayez d'ajouter la classe bootstraps "table" à l'étiquette.

    <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>
2
répondu Philipp Dahse 2015-02-05 11:26:29
la source

la réponse acceptée est incorrecte. Pour les docs

Créer responsive tables par emballage tout .table en .tableau sensible pour les faire défiler horizontalement sur de petits appareils (sous 768px). Lorsque vous regardez sur quelque chose de plus grand que 768px large, vous ne verrez aucune différence dans ces tableaux.

Alors va pour afficher la bonne utilisation

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

vous devriez aussi avoir le .table classe sur le <table>

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

2
répondu dbinott 2017-02-25 08:21:29
la source

en termes simples !!

Créer responsive tables en enveloppant le tout .table.table-responsive pour les faire défiler horizontalement sur de petits appareils (sous

Autres questions sur