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.

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.

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.

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

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

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.

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

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

Essaye ça -

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

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

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

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.

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

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

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>

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>

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.

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

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