Comment configurer une largeur fixe pour <td>?


514

Schéma simple:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Je dois définir une largeur fixe pour <td>. J'ai essayé:

tr.something {
  td {
    width: 90px;
  }
}

Aussi

td.something {
  width: 90px;
}

pour

<td class="something">B</td>

Et même

<td style="width: 90px;">B</td>

Mais la largeur de <td>est toujours la même.


1
J'ai juste essayé et ça marche - peut-être que le problème est quelque part différent. Que vous dit Firebug sur l'élément?
Rockbot

Sur ce site , l'homme parle de ce sujet avec une vidéo. C'est tellement clair.
egemen

utilisez style="width: 1% !important;"pour rendre la largeur aussi serrée que le mot le plus long de la colonne, c'est utile pour la première colonne ID / #. Testé en chrome (desktop & mobile), opera (desktop), IE (desktop), edge (desktop), firefox (desktop)
vinsa

Réponses:


1085

Pour Bootstrap 4.0:

Dans Bootstrap 4.0.0, vous ne pouvez pas utiliser les col-*classes de manière fiable (fonctionne dans Firefox, mais pas dans Chrome). Vous devez utiliser la réponse d'OhadR :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

Pour Bootstrap 3.0:

Avec twitter bootstrap 3, utilisez: class="col-md-*"où * est un nombre de colonnes de largeur.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Pour Bootstrap 2.0:

Avec twitter bootstrap 2, utilisez: class="span*"où * est un nombre de colonnes de largeur.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Si vous avez des <th>éléments, définissez la largeur là-bas et non sur les <td>éléments.


79
Que se passe-t-il si vous avez plus de 12 colonnes?
ClearCloud8

33
vous ne pouvez l'appliquer que dans la <head> de chaque <th> balise et toutes les lignes correspondront
Diego Fernando Murillo Valenci

7
Existe-t-il une documentation à ce sujet sur le site Web Bootstrap?
Luis Perez

26
Cela fonctionne, mais ce n'est pas sur le site bootstrap car ces classes col- * ne sont pas destinées à être utilisées de cette façon. Ils sont destinés à être utilisés dans les grilles de bootstrap réactives. Si vous aimez ce que cela fait, pensez à regarder le CSS pour eux et copiez-le pour créer votre propre CSS.
DustinA

1
De plus, au lieu de définir la classe pour la ligne de portée, nous pouvons simplement la définir une fois pour l'en-tête <th> et le reste est pris en charge automatiquement!
dopplesoldner

133

J'avais le même problème, j'ai fait le tableau fixe et puis spécifié ma largeur td. Si vous en avez, vous pouvez aussi les faire.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Modèle:

<td style="width:10%">content</td>

Veuillez utiliser CSS pour structurer les mises en page.



C'est génial, mais en plus, utilisez un classdans le tdtag au lieu d'appliquer le style directement
Ramses

1
Cela fonctionne mieux merci juste assez pour augmenter la largeur de thlike: <th style="width: 25%;"></th>cela affectera la largeur des autres colonnes
shaijut

Je vous remercie! J'ai défini la classe col-md-x pour Bootstrap 3 mais cela n'a pas fonctionné. Définir la disposition de la table sur "fixe" résout mon problème.
maurisrx

Cela marche. La clé est le table-layout: fixed. Cela est nécessaire car de nombreux modèles construits avec BS4 appliquent flex à tout, y compris les tableaux.
Ivan

73

Au lieu d'appliquer les col-md-*classes à chacune tddans la ligne, vous pouvez créer un colgroupet appliquer les classes à la colbalise.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Démo ici


1
Je préfère cela, mais cela ne semble pas affecter mon cas, la largeur de colonne ne s'étend pas de col-md- *
Osify

J'aime cette solution, d'ailleurs, pourquoi est-on obligé d'utiliser les classes col-md- * et non col-lg- *, col-sm- * ou col-xs- *?
LucioB

1
@LucioB vous pouvez utiliser ce que vous voulez et même en utiliser plusieurs par colonne (l'exemple <col class="col-md-4 col-sm-6">aura une largeur de 33% en taille d'écran moyenne et 50% en petite taille d'écran)
VDarricau

1
Colgroup ne fonctionne pas dans Chrome. (Bootstrap v4.1). Pour l'uniformité entre les navigateurs, utilisez% width pour les éléments <td>.
AnkitK

57

J'espère que celui-ci aidera quelqu'un:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863


1
Réponse la plus
simple

54

Si vous utilisez <table class="table">sur votre table, la classe de table Bootstrap ajoute une largeur de 100% à la table. Vous devez changer la largeur en auto.

De plus, si la première ligne de votre table est une ligne d'en-tête, vous devrez peut-être ajouter la largeur à th plutôt qu'à td.


1
En plus de Bootstrap 3, vous devrez également définir la propriété d'espace blanc de la thnormale, car elle est actuellement à l'heure actuelle car ces en-têtes ne se casseront pas.
Sammaye

41

Dans mon cas, j'ai pu résoudre ce problème en utilisant min-width: 100pxau lieu de width: 100pxpour les cellules thou td.

.table td, .table th {
    min-width: 100px;
}

13
Cela a peut-être préservé ce qui reste de ma raison.
Joel

Oui! cela définit, eh bien, la largeur minimale d'une colonne dans un tableau réactif. Merci.
O. Jones

1
cela a fonctionné mieux que la question répondue, merci!
israël

38

Pour Bootstrap 4, vous pouvez simplement utiliser l'assistant de classe:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

5
Cela convient à mon cas d'utilisation. Merci!
tonny

16
Il est important de noter que les seules options w- * sont: .w-25, .w-50, .w-75, .w-100, .w-autodonc si vous voulez autre chose, disons, w-10vous devrez ajouter .w-10 { width: 10% !important; }à votre fichier CSS localisé.
Abela

10

Essaye ça -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

3
C'est la seule qui fonctionne à partir de toutes les autres réponses.
0bserver07

J'ai également ajouté text-overflow: ellipsispour m'assurer que le texte de coupure est apparent
weeksdev

@ Observer07 Indeed
TheRandomGuy

9

Bootstrap 4.0

Sur Bootstrap 4.0, nous devons déclarer les lignes du tableau en tant que flex-boxes en ajoutant la classe d-flex, et également supprimer les suffixes xs, md, pour permettre à Bootstrap de le dériver automatiquement de la fenêtre.

Il ressemblera donc à ceci:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

J'espère que cela sera utile à quelqu'un d'autre!

À votre santé!


7

Cette solution combinée a fonctionné pour moi, je voulais des colonnes de largeur égale

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Résultat :-

entrez la description de l'image ici


3

Ok, je viens de découvrir où était le problème - dans Bootstrap est configuré comme valeur par défaut widthpour l' selectélément, ainsi, la solution est:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Rien d'autre ne me fonctionne.


2

Difficile de juger sans le contexte de la page html ou le reste de votre CSS. Il pourrait y avoir une multitude de raisons pour lesquelles votre règle CSS n'affecte pas l'élément td.

Avez-vous essayé des sélecteurs CSS plus spécifiques tels que

tr.somethingontrlevel td.something {
  width: 90px;
}

Ceci pour éviter que votre CSS ne soit remplacé par une règle plus spécifique du CSS d'amorçage.

(au fait, dans votre échantillon css en ligne avec l'attribut style, vous avez mal orthographié la largeur - cela pourrait expliquer pourquoi cet essai a échoué!)


2

Je me bats avec le problème depuis un certain temps, donc juste au cas où quelqu'un commet la même erreur stupide que moi ... À l'intérieur, <td>j'ai white-space:preappliqué l'élément avec style. Cela a mis au rebut tous mes tours de table / tr / td. Lorsque j'ai supprimé ce style, tout à coup tout mon texte a été joliment formaté à l'intérieur du td.

Donc, vérifiez toujours le conteneur principal (comme tableou td) mais aussi, vérifiez toujours si vous n'annulez pas votre beau code quelque part plus profondément :)


1

Utilisez d-flex au lieu de la ligne pour "tr" dans Bootstrap 4

Le fait est que la classe "row" prend plus de largeur que le conteneur parent, ce qui pose des problèmes.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>


Je voulais dire "rangée" au lieu de "tr". Comme la classe de rangée est livrée avec des gouttières aux deux extrémités. Ou si vous ne voulez pas utiliser la classe "row", ajoutez simplement la classe "no-gutters".
Usman Anwar

1

Dans bootstarp 4, vous pouvez utiliser rowet col-*dans le tableau, je l'utilise comme ci-dessous

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

1

C'est comme ça que je le fais souvent quand je n'ai pas à faire face à IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

De cette façon, vous pouvez avoir une grille de 12 couleurs familière.


0

Rien de tout cela ne fonctionne pour moi, et j'ai beaucoup de colonnes sur datatable pour que la classe% ou sm soit égale à 12 éléments sur le bootstrap.

Je travaillais avec les tables de données Angular 5 et Bootstrap 4, et j'ai de nombreux cols dans le tableau. La solution pour moi était THd'ajouter un DIVélément avec une largeur spécifique. Par exemple, pour les colonnes "Nom de personne" et "Date de l'événement", j'ai besoin d'une largeur spécifique, puis mettez un divdans l'en-tête de colonne, la largeur de col entière se redimensionne ensuite à la largeur spécifiée à partir de la div sur le TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

-1

utiliser quelque chose sans td ou th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>


-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>


Ajoutez aussi quelques explications.
Akash Dubey

Cette réponse prête à confusion au mieux. Les classes sont des identifiants étranges et non essentiels, aucune explication.
GotBatteries
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.