Dimensionnement des colonnes de table

Question 1

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>

Question 2

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

Question 3

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>

Question 4

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>

Question 5

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

Question 6

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>

Question 7

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>

Question 8

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

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

Oui, les w-25, w-50et les w-75classes fonctionnent avec bootstrap 4. Merci!

olidem

Answer 8

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

Answer 9

1

Fonctionne mais vertical-align: middlene fonctionne plus avec la d-flexclasse.

Eve

Answer 10

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

Answer 11

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>

Answer 12

5

La solution la plus simple et la meilleure, honnêtement. Tout le reste a lamentablement échoué pour moi.

Créature

Answer 13

3

Remarque L' utilisation de l'attribut width pour <th> n'est plus prise en charge dans HTML5

StefanJM

Answer 14

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

Answer 15

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

Voir ce stackoverflow.com/questions/41794746/…

Abdalla Arbab

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

Answer 16

Cela ne semble pas fonctionner pour définir la largeur des colonnes: codeply.com/go/Utyon2XEB6

Zim

Answer 17

Voir ce stackoverflow.com/questions/41794746/…

Abdalla Arbab

Answer 18

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

Answer 19

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>

Answer 20

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

Answer 21

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

Dimensionnement des colonnes de table

Réponses: