Pourquoi les tables Twitter Bootstrap ont-elles toujours une largeur de 100%?

148

Supposons ce balisage:

<table class="table table-bordered" align="center">

Peu importe le nombre de cellules que j'ai, le tableau a toujours une largeur de 100%. Pourquoi ça?

twitter-bootstrap skowron-ligne
la source
3
parce qu'il utilise efficacement la largeur de ses parents; c'est ainsi que le système de grille devrait fonctionner!
Vishal
Quelle largeur voulez-vous que votre table ait?
Andres Ilich
1
Je voudrais que cela dépende du nombre de cellules, tout comme un tableau ordinaire
skowron-line
1
Pour ceux qui cherchent comment définir la largeur de cellule comme la largeur div via span, vérifiez cette réponse
alexche8

Réponses:

228

Toutes les tables du bootstrap s'étirent en fonction de leur conteneur, ce que vous pouvez facilement faire en plaçant votre table à l'intérieur d'un .span*élément de grille de votre choix. Si vous souhaitez supprimer cette propriété, vous pouvez créer votre propre classe de table et l'ajouter simplement à la table que vous souhaitez développer avec le contenu à l'intérieur:

.table-nonfluid {
   width: auto !important;
}

Vous pouvez ajouter cette classe dans votre propre feuille de style et l'ajouter simplement au conteneur de votre table comme ceci:

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

De cette façon, votre modification n'affectera pas la feuille de style bootstrap elle-même (vous voudrez peut-être avoir une table fluide ailleurs dans votre document).

Andres Ilich
la source
1
Si vous placez le tableau à l'intérieur d'une balise span *, pour centrer le tableau, incluriez-vous simplement un décalage *?
HPWD
@dlackey Oui, vous pouvez décaler le tableau avec une classe afin de le centrer, vous pouvez même ajouter une .span*classe à votre tableau pour lui donner une certaine largeur.
Andres Ilich
2
Au moins avec bootstrap 3, cela n'a fonctionné pour moi qu'après avoir ajouté !importantauwidth: auto
geekQ
nous devons utiliser la classe span de bootstarp pour une table, ou nous devons donner manuellement un style pour la classe .span,
Jot Dhaliwal
1
Avertissement. Soyez prudent s'il est utilisé en combinaison avec .table-responsive et .table-bordered. La bordure est appliquée au conteneur .table-responsive lorsque la largeur de l'écran est inférieure à 767px. (bootstrap 3.x)
Stuart
31

<table style="width: auto;" ...fonctionne très bien. Testé dans Chrome 38, IE 11 et Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

Razan Paul
la source
13

Réponse 1:

Pourquoi le combattre? Pourquoi ne pas contrôler simplement la largeur de votre table à l'aide de la grille bootstrap? Il s'agit du balisage Bootstrap 3.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Cela créera une table qui est la moitié (6 sur 12) de la largeur de l'élément contenant.

J'utilise parfois des styles en ligne comme pour les autres réponses, mais c'est déconseillé.

Réponse n ° 2:

Si vous utilisez bootstrap 4, il a quelques classes d'assistance intéressantes pour la largeur comme:

w-25, w-50, w-75, and w-100

Voici le document: https://getbootstrap.com/docs/4.0/utilities/sizing/

Jess
la source
2
c'est de loin la solution la plus simple et devrait être la réponse acceptée
Jeff Brown
12

J'avais le même problème, j'ai réparé la table, puis j'ai spécifié ma largeur de td. Si vous en avez, vous pouvez également le faire.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

Je n'ai pas eu de chance avec .table-nonfluid.

DDDD
la source
1
Essayerwidth: auto !important;
Leo
Vous pouvez éviter !important(c'est une mauvaise pratique ). Voir le commentaire sur une réponse ci-dessous .
Ollie Bennett
3

J'ai essayé d'ajouter style="width: auto !important"et fonctionne très bien pour moi!

Sergey Dolgopolov
la source
1
Si vous vous assurez que votre CSS personnalisé apparaît après le CSS Bootstrap (par exemple, votre <link>balise de styles personnalisés apparaît sous la <link>balise Bootstrap ), alors les règles seront mises en cascade comme prévu, et vous ne devriez pas du tout avoir besoin d'utiliser votre !importantexception. Cela est vrai car il width: 100%;est défini tabledans le CSS Bootstrap et remplace donc votre width: auto;règle.
Ollie Bennett
Pas vraiment une réponse, mieux vaut éditer la réponse actuelle acceptée que la plupart des gens lisent (je l'ai éditée maintenant) .
Iulian Onofrei