Dimensionnement des colonnes du tableau

Question

Sur Bootstrap 3 Je pourrais appliquer col-sm-xx à la th dans les thead et redimensionner les colonnes des tableaux à volonté. Cependant, cela ne fonctionne pas dans bootstrap 4. Comment puis-je réaliser quelque chose comme cela dans bootstrap 4 ?

<thead>
<th class="col-sm-3">3 columns wide</th>
<th class="col-sm-5">5 columns wide</th>
<th class="col-sm-4">4 columns wide</th>
</thead>

En regardant le codeply fourni, il ne se dimensionne pas correctement, surtout si vous ajoutez des données au tableau. Voyez comment cela fonctionne :

<div class="container" style="border: 1px solid black;">
    <table class="table table-bordered">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 columns wide</th>
            <th class="col-sm-5">5 columns wide</th>
            <th class="col-sm-4">4 columns wide</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
        </tr>
    </tbody>
</table>
</div>

Answer 1

Mis à jour en 2018

Assurez-vous que votre table comprend le table classe. Cela s'explique par le fait que Les tableaux de Bootstrap 4 sont "opt-in". donc le table doit être ajoutée intentionnellement au tableau.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x disposait également de CSS pour réinitialiser les cellules des tableaux afin qu'elles ne flottent pas

table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}

Je ne sais pas pourquoi cela ne fait pas partie de Bootstrap 4 alpha, mais il se peut que cela soit ajouté dans la version finale. L'ajout de cette feuille de style CSS permettra à toutes les colonnes d'utiliser les largeurs définies dans le champ thead ..

Démonstration de Bootstrap 4 Alpha 2

---

MISE À JOUR (à partir de Bootstrap 4.0.0)

Maintenant que Bootstrap 4 est flexbox, les cellules du tableau ne prendront pas la largeur correcte lorsque l'on ajoute col-* . Une solution de contournement consiste à utiliser l'option d-inline-block sur les cellules du tableau pour empêcher l'affichage par défaut:flex des colonnes.

Une autre option dans BS4 est d'utiliser les classes d'outils de dimensionnement pour la largeur...

<thead>
     <tr>
           <th class="w-25">25</th>
           <th class="w-50">50</th>
           <th class="w-25">25</th>
     </tr>
</thead>

Démonstration de Bootstrap 4 Alpha 6

Enfin, vous pouvez utiliser d-flex sur les rangées du tableau (tr), et le bouton col-* classes de grille sur les colonnes (th,td)...

<table class="table table-bordered">
        <thead>
            <tr class="d-flex">
                <th class="col-3">25%</th>
                <th class="col-3">25%</th>
                <th class="col-6">50%</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-sm-3">..</td>
                <td class="col-sm-3">..</td>
                <td class="col-sm-6">..</td>
            </tr>
        </tbody>
    </table>

Bootstrap 4.0.0 (stable) Demo

Note : Changer le TR en display:flex peut modifier les frontières

Answer 2

Une autre option est d'appliquer un style flexible à la ligne du tableau, et d'ajouter l'élément col-classes à l'en-tête du tableau / aux éléments de données du tableau :

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>

Answer 3

Avertissement : Cette réponse peut être un peu ancienne. Depuis la bêta de Bootstrap 4. Bootstrap a changé depuis.

La classe de taille des colonnes de la table a été modifiée comme suit

<th class="col-sm-3">3 columns wide</th>

à

<th class="col-3">3 columns wide</th>

Answer 4

Je peux résoudre ce problème avec le code suivant en utilisant Bootstrap 4 :

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>

Answer 5

À partir d'Alpha 6, vous pouvez créer le fichier sass suivant :

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  col, td, th {
    @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          flex: none;
          position: initial;
        }
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      @for $i from 1 through $grid-columns {
        &.col#{$infix}-#{$i} {
          width: 100% / $grid-columns * $i;
        }
      }
    }
  }
}