Comment réaliser le redimensionnement des colonnes dans les tables Bootstrap 4 ?

Dimensionnement des colonnes de tableau dans Bootstrap 4

Question :

Dans Bootstrap 3, on pouvait modifier la largeur de colonne d'un ligne d'en-tête du tableau en ajoutant col-sm-xx aux balises. Cette fonctionnalité semble manquer dans Bootstrap 4. Comment réaliser un redimensionnement de colonne dans Bootstrap 4 ?

Réponse :

Mise à jour (2018)

Pour garantir le succès du fonctionnement, assurez-vous que la table contient la classe table. Les tables Bootstrap 4 sont « opt-in », nécessitant l'ajout explicite de la classe de table pour lancer la fonctionnalité de la table.

Ajustement Bootstrap 3.x

Dans Bootstrap 3. .x, du CSS supplémentaire a été utilisé pour supprimer le statut flottant des cellules du tableau :

<code class="css">table td[class*=col-], table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none;
}</code>

Bootstrap 4 Alpha a omis cette personnalisation, bien que son inclusion dans la version finale soit possible. Son ajout garantirait que les cellules du tableau respectent les largeurs définies dans l'en-tête du tableau.

Mise à jour Bootstrap 4 Alpha 2

Avec la transition de Bootstrap 4 vers flexbox, les largeurs de colonnes ne sont pas automatiquement héritées. à partir de l’en-tête du tableau. Pour remédier à ce problème, utilisez la classe d-inline-block sur les cellules du tableau, en remplaçant le paramètre display:flex par défaut des colonnes.

Options de redimensionnement supplémentaires

un. Dimensionnement des classes utilitaires (Bootstrap 4.0.0)

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

b. Classes Flexbox et Column Grid

<code class="html"><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></code>

Remarque : L'application de display:flex aux lignes du tableau peut affecter l'affichage des bordures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!