Bootstrap: table de fluides trop large pour la fenêtre
je travaille sur un projet en utilisant bootstrap twitter. Nous avons une table qui a beaucoup de colonnes et va être plus grande que la fenêtre du navigateur presque à chaque fois.
voici ce qui se passe à droite :
la bordure de la table reste dans la fenêtre du navigateur, alors que le contenu de la table ne le reste pas. Si je fais défiler, les bordures restent où elles sont, elles ne "suivent" pas la fenêtre du navigateur.
Vous pouvez voir le problème sur ce jsfiddle. Il fonctionne sur Safari, pas sur Chrome ou Firefox.
La mise en page est comme ceci :
<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 pourrez m'aider. Si vous avez besoin de plus d'informations, n'hésitez pas à me les fournir.
Il s'agit d'une application Rails 3.2, utilisant le bootstrap-sass gem dans la version 2.2.1.1 (le problème apparaît aussi dans 2.2.2.0). Les trois premiers chiffres reflètent la version bootstrap.
6 réponses
Bootstrap a le style suivant appliqué aux Tables:
table {
max-width: 100%;
}
si vous outrepassez cette propriété dans votre feuille de style personnalisée, cela devrait résoudre le problème. Le changer en "aucun" devrait marcher.
table {
max-width: none;
}
C'était la seule solution qui fonctionnait pour moi...
.table {
max-width: none;
table-layout: fixed;
word-wrap: break-word;
}
Si vous êtes sur Bootstrap 3, une autre approche consiste à envelopper votre table
<div class="table-responsive"><table>...</table></div>
cela rend la table réactive.
vous pouvez appliquer le style = " overflow: auto;" pour mettre une barre de défilement horizontale à votre table. Ainsi, la conception restera toujours sensible. Suivez le code:
.table-scrollable{
overflow: auto;
}
Et l'utiliser sur votre div:
<div class='span11 table-scrollable'>
en Appliquant le style = "overflow: auto;" a très bien fonctionné pour moi
j'ai trouvé la solution quelque part sur internet...
table {table-layout:fixed}
- Il de résoudre des problèmes de Firefox & IE, avec bootstrap 2 & 3