web-dev-qa-db-fra.com

Bootstrap: table fluide trop large pour la fenêtre

Je travaille sur un projet utilisant Twitter bootstrap. Nous avons une table qui a beaucoup de colonnes et qui sera presque plus grande que la fenêtre du navigateur à chaque fois.

Voici ce qui se passe à droite:

The Problem

La bordure du tableau reste dans la fenêtre du navigateur, contrairement au contenu du tableau. Si je défile, les bordures restent où elles sont, elles ne "suivent" pas la fenêtre du navigateur.

Vous pouvez voir le problème sur ce jsfiddle . Cela fonctionne sur Safari, pas sur Chrome ou Firefox.

La disposition est la suivante:

<body>
  <div class='container-fluid'>
    <div class='row-fluid'>
      <div class='span1'>
        ... menusidebar here...
      </div>
      <div class='span11'>
        <table class="table table-striped table-bordered" style="white-space: nowrap">
          <thead>
            <tr>
            </tr>
          </thead>
          <tbody>
            <tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>

J'espère que vous pouvez m'aider. Si vous avez besoin de plus d'informations, n'hésitez pas à demander, je serais ravi de vous fournir.

Il s'agit d'une application Rails 3.2, utilisant le gem bootstrap-sass dans la version 2.2.1.1 (le problème apparaît également dans 2.2.2.0). Les trois premiers chiffres reflètent le bootstrap.

twitter-bootstraphtml-tablefluid-layout
18
ksol

Bootstrap a le style suivant appliqué aux tableaux:

table {
    max-width: 100%;
}

Si vous remplacez cette propriété dans votre feuille de style personnalisée, nous espérons que cela devrait résoudre le problème. Le changer en "aucun" devrait fonctionner.

table {
    max-width: none;
}
6
Billy Moat

Ce fut la seule solution qui a fonctionné pour moi ...

.. ____.]}
24
diogoareia

Si vous êtes sur Bootstrap 3, une autre approche consiste à envelopper votre table dans un

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

Cela rend la table réactive.

20
Shirren

Vous pouvez appliquer le style = "overflow: auto;" pour mettre une barre de défilement horizontale à votre table. Ainsi, le design restera réactif. Suivez le code:

.table-scrollable{
    overflow: auto;
}

Et utilisez-le sur votre div:

<div class='span11 table-scrollable'>
4
Eduardo Arruda Pimentel

Appliquer le style = "overflow: auto;" a très bien fonctionné pour moi

0
user2245138