Comment redimensionner les colonnes du tableau Bootstrap 4 ?

Redimensionnement des colonnes du tableau Bootstrap 4

Bootstrap 3 autorisait le redimensionnement des colonnes du tableau en utilisant la classe col-sm-xx sur les balises dans l'en-tête. Cependant, cette méthode n'est pas efficace dans Bootstrap 4.

Approche mise à jour

Étape 1 : Assurer la classe "table" sur la table

Les tables Bootstrap 4 sont « opt-in », ce qui signifie que la classe de table doit être explicitement ajoutée à l'élément table.

Étape 2 : ajouter du CSS pour l'affichage des blocs en ligne

Bootstrap 3 incluait auparavant CSS pour réinitialiser les positions des cellules du tableau et empêcher le flottement. Ce CSS est absent dans Bootstrap 4 Alpha, mais vous pouvez l'ajouter :

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

Étape 3 : Utiliser les classes utilitaires de dimensionnement (Bootstrap 4.0.0 et versions ultérieures)

Alternativement, dans Bootstrap 4.0.0 et au-delà, vous pouvez utiliser les classes utilitaires w-* pour la largeur :

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

Étape 4 : Utiliser Flexbox (Bootstrap 4.0.0 et versions ultérieures)

Une autre option consiste à utiliser d-flex sur les lignes tr et les classes de grille comme col-* sur les colonnes :

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

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!