web-dev-qa-db-fra.com

Comment configurer une largeur fixe pour <td>?

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;
  }
}

Également

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.

csstwitter-bootstrapwidthhtml-table
418
user984621

Pour Bootstrap 4.0:

Dans Bootstrap 4.0.0, vous ne pouvez pas utiliser les classes col-* de manière fiable (fonctionne dans Firefox, mais pas dans Chrome) . Vous devez utiliser Réponse de 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 éléments <th>, définissez la largeur à cet endroit et non sur les éléments <td>.

902
Paulo

J'avais le même problème, j'ai corrigé le tableau, puis spécifié ma largeur en 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.

107
DDDD

Au lieu d'appliquer les classes col-md-* à chaque td de la ligne, vous pouvez créer un colgroup et appliquer les classes à la balise col.

    <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

67
stormwild

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

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

53
meobyte

Espérons 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

37
OhadR

Dans mon cas, j'ai pu résoudre ce problème en utilisant min-width: 100px au lieu de width: 100px pour les cellules th ou td.

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

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>
      ...
15
H0WARD

Essaye ça -

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

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 :-

 enter image description here

7
Hitesh Sahu

Bootstrap 4.0

Sur Bootstrap 4.0, nous devons déclarer les lignes de la table comme des boîtes flexibles en ajoutant la classe d-flex, ainsi que des suffixes xs, md et permettre à Bootstrap de le déduire automatiquement de la fenêtre d'affichage.

Donc, cela ressemblera à:

<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é!

4
Randika Vishman

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

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

Tout le reste ne me fonctionne pas.

3
user984621

Je suis aux prises avec ce problème depuis un certain temps, donc juste au cas où quelqu'un commettrait la même erreur stupide que moi ……. À l'intérieur du <td>, j'ai appliqué l'élément avec le style white-space:pre. Cela a mis tous mes tricks de table/tr/td au rebut. Lorsque j'ai supprimé ce style, tout mon texte a soudainement été formaté dans la variable td.

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

2
Mikk

Difficile de juger sans le contexte de la page HTML ou le reste de votre CSS. Il peut y avoir plusieurs millions 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 afin d’éviter que votre code CSS ne soit remplacé par une règle plus spécifique tirée du fichier bootstrap css.

(Au fait, dans votre échantillon css intégré avec l'attribut style, vous avez mal orthographié la largeur - cela pourrait expliquer pourquoi cette tentative a échoué!)

2
David Heijl

utilisez. 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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

0
gecko

<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>

0
user10861319

Rien de tout cela ne fonctionne pour moi, et il y a beaucoup de colonnes sur datatable pour faire en sorte que la classe% ou sm soit égale à la disposition de 12 éléments sur le bootstrap.

Je travaillais avec les tables de données Angular 5 et Bootstrap 4, et j'ai beaucoup de colonnes dans la table. La solution pour moi était dans la TH d'ajouter un élément DIV avec une largeur spécifique. Par exemple, pour les colonnes "Nom de la personne" et "Date de l'événement", j'ai besoin d'une largeur spécifique, puis placez une variable div dans l'en-tête de la colonne. La largeur de la colonne entière est ensuite redimensionnée à la largeur spécifiée dans la variable 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> ...
0
Axel Osorio