Dimensionnement des colonnes de table

103

Dans Bootstrap 3, je pourrais appliquer col-sm-xxaux thbalises dans les theadcolonnes du tableau et redimensionner à volonté. Cependant, cela ne fonctionne pas dans bootstrap 4. Comment puis-je réaliser quelque chose comme ça 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 la réponse de code à condition qu'elle ne soit pas dimensionnée correctement, surtout si vous ajoutez des données à la table. 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>
Killerpixler
la source
1
en complément à cette question: si vous avez du contenu long (comme des URL très longues) pour afficher le bootstrap, 4 tables ne sont pas une excellente solution, même avec la réponse de dimensionnement ci-dessous. soit en utilisant une solution flex-row ou row / col a tendance à mieux fonctionner avec le débordement et le text-wrap
Killerpixler

Réponses:

162

Mise à jour 2018

Assurez-vous que votre table inclut la tableclasse. Ceci est dû au fait que les tables Bootstrap 4 sont "opt-in", donc la tableclasse doit être intentionnellement ajoutée à la table.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x avait également du CSS pour réinitialiser les cellules du tableau 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 ce n'est pas Bootstrap 4 alpha, mais il peut être ajouté dans la version finale. L'ajout de ce CSS aidera toutes les colonnes à utiliser les largeurs définies dans le thead..

Démo 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 bonne largeur lors de l'ajout col-*. Une solution de contournement consiste à utiliser la d-inline-blockclasse sur les cellules du tableau pour empêcher l'affichage par défaut: flex des colonnes.

Une autre option dans BS4 consiste à utiliser les classes d'utils 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émo Bootstrap 4 Alpha 6

Enfin, vous pouvez utiliser d-flexsur les lignes du tableau (tr), et les col-*classes de la 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>

Démo Bootstrap 4.0.0 (stable)

Remarque: Changer le TR à afficher: flex peut modifier les bordures

Zim
la source
En fait, cela ne taille pas correctement. Vérifiez-le si vous ajoutez des bordures pour voir comment est le dimensionnement et quand vous ajoutez une ligne au corps. J'ai mis le code dans la question
Killerpixler
En fait, votre exemple BS4-A6 ne fonctionne pas si vous avez un contenu débordant dans une colonne car les autres colonnes ne sont pas étendues. Essayez de coller du lorem ipsum dans une colonne.
Killerpixler
1
Votre solution a fonctionné. Dans mon cas, je devais ajouter des no-gutters dans le tr pour éviter un rembourrage négatif jsfiddle.net/Vimalan/xhvdcasn
Vimalan Jaya Ganesh
Oui, les w-25, w-50et les w-75classes fonctionnent avec bootstrap 4. Merci!
olidem
26

Une autre option consiste à appliquer un style flexible à la ligne du tableau et à ajouter les col-classeséléments de données d'en-tête / tableau 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>
Jacob van Lingen
la source
1
Fonctionne mais vertical-align: middlene fonctionne plus avec la d-flexclasse.
Eve
L'alignement vertical ne fonctionne en effet pas sur la disposition flexbox. Utilisez align-items: baseline. Pour en savoir plus sur la flexbox, lisez ce guide
Jacob van Lingen
12

L'utilisation de la d-flexclasse fonctionne bien mais certains autres attributs ne fonctionnent plus commevertical-align: middle propriété.

Le meilleur moyen que j'ai trouvé pour dimensionner les colonnes très facilement est d'utiliser l' widthattribut avec un pourcentage uniquement dans les theadcellules.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>
Veille
la source
5
La solution la plus simple et la meilleure, honnêtement. Tout le reste a lamentablement échoué pour moi.
Créature
3
Remarque L' utilisation de l'attribut width pour <th> n'est plus prise en charge dans HTML5
StefanJM
10

J'ai piraté ceci pour la version Bootstrap 4.1.1 selon mes besoins avant de voir le message de @ florian_korner. Ça a l'air très similaire.

Si vous utilisez sass, vous pouvez coller cet extrait à la fin de votre bootstrap includes. Cela semble résoudre le problème pour Chrome, IE et Edge. Ne semble rien casser dans Firefox.

@mixin make-td-col($size, $columns: $grid-columns) {
    width: percentage($size / $columns);
}

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

    @for $i from 1 through $grid-columns {
        td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
            @include make-td-col($i, $grid-columns);
        }
    }
}

ou si vous voulez juste l'utilitaire css compilé:

td.col-1, th.col-1 {
  width: 8.33333%; }

td.col-2, th.col-2 {
  width: 16.66667%; }

td.col-3, th.col-3 {
  width: 25%; }

td.col-4, th.col-4 {
  width: 33.33333%; }

td.col-5, th.col-5 {
  width: 41.66667%; }

td.col-6, th.col-6 {
  width: 50%; }

td.col-7, th.col-7 {
  width: 58.33333%; }

td.col-8, th.col-8 {
  width: 66.66667%; }

td.col-9, th.col-9 {
  width: 75%; }

td.col-10, th.col-10 {
  width: 83.33333%; }

td.col-11, th.col-11 {
  width: 91.66667%; }

td.col-12, th.col-12 {
  width: 100%; }

td.col-sm-1, th.col-sm-1 {
  width: 8.33333%; }

td.col-sm-2, th.col-sm-2 {
  width: 16.66667%; }

td.col-sm-3, th.col-sm-3 {
  width: 25%; }

td.col-sm-4, th.col-sm-4 {
  width: 33.33333%; }

td.col-sm-5, th.col-sm-5 {
  width: 41.66667%; }

td.col-sm-6, th.col-sm-6 {
  width: 50%; }

td.col-sm-7, th.col-sm-7 {
  width: 58.33333%; }

td.col-sm-8, th.col-sm-8 {
  width: 66.66667%; }

td.col-sm-9, th.col-sm-9 {
  width: 75%; }

td.col-sm-10, th.col-sm-10 {
  width: 83.33333%; }

td.col-sm-11, th.col-sm-11 {
  width: 91.66667%; }

td.col-sm-12, th.col-sm-12 {
  width: 100%; }

td.col-md-1, th.col-md-1 {
  width: 8.33333%; }

td.col-md-2, th.col-md-2 {
  width: 16.66667%; }

td.col-md-3, th.col-md-3 {
  width: 25%; }

td.col-md-4, th.col-md-4 {
  width: 33.33333%; }

td.col-md-5, th.col-md-5 {
  width: 41.66667%; }

td.col-md-6, th.col-md-6 {
  width: 50%; }

td.col-md-7, th.col-md-7 {
  width: 58.33333%; }

td.col-md-8, th.col-md-8 {
  width: 66.66667%; }

td.col-md-9, th.col-md-9 {
  width: 75%; }

td.col-md-10, th.col-md-10 {
  width: 83.33333%; }

td.col-md-11, th.col-md-11 {
  width: 91.66667%; }

td.col-md-12, th.col-md-12 {
  width: 100%; }

td.col-lg-1, th.col-lg-1 {
  width: 8.33333%; }

td.col-lg-2, th.col-lg-2 {
  width: 16.66667%; }

td.col-lg-3, th.col-lg-3 {
  width: 25%; }

td.col-lg-4, th.col-lg-4 {
  width: 33.33333%; }

td.col-lg-5, th.col-lg-5 {
  width: 41.66667%; }

td.col-lg-6, th.col-lg-6 {
  width: 50%; }

td.col-lg-7, th.col-lg-7 {
  width: 58.33333%; }

td.col-lg-8, th.col-lg-8 {
  width: 66.66667%; }

td.col-lg-9, th.col-lg-9 {
  width: 75%; }

td.col-lg-10, th.col-lg-10 {
  width: 83.33333%; }

td.col-lg-11, th.col-lg-11 {
  width: 91.66667%; }

td.col-lg-12, th.col-lg-12 {
  width: 100%; }

td.col-xl-1, th.col-xl-1 {
  width: 8.33333%; }

td.col-xl-2, th.col-xl-2 {
  width: 16.66667%; }

td.col-xl-3, th.col-xl-3 {
  width: 25%; }

td.col-xl-4, th.col-xl-4 {
  width: 33.33333%; }

td.col-xl-5, th.col-xl-5 {
  width: 41.66667%; }

td.col-xl-6, th.col-xl-6 {
  width: 50%; }

td.col-xl-7, th.col-xl-7 {
  width: 58.33333%; }

td.col-xl-8, th.col-xl-8 {
  width: 66.66667%; }

td.col-xl-9, th.col-xl-9 {
  width: 75%; }

td.col-xl-10, th.col-xl-10 {
  width: 83.33333%; }

td.col-xl-11, th.col-xl-11 {
  width: 91.66667%; }

td.col-xl-12, th.col-xl-12 {
  width: 100%; }
madame
la source
5

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

La classe de taille de colonne de table a été modifiée à partir de ceci

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

à

<th class="col-3">3 columns wide</th>
Abdalla Arbab
la source
Cela ne semble pas fonctionner pour définir la largeur des colonnes: codeply.com/go/Utyon2XEB6
Zim
1
L'autre question est sans rapport. Les largeurs de colonne ne fonctionnent pas sur les cellules de tableau à cause de la flexbox BS4 alpha 6 comme expliqué dans ma réponse.
Zim
4

Je peux résoudre ce problème en utilisant 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>
jorge santos
la source
1

À 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;
        }
      }
    }
  }
}
Florian Körner
la source
ce code ne fonctionne pas du tout - j'ai essayé de le déboguer pendant 1,5 heure mais ma connaissance de sass est trop faible pour le faire. Plz poster des exemples de travail la prochaine fois.
Slowwie