Comment redimensionner les colonnes du tableau dans Bootstrap 4 ?

Dimensionnement des colonnes de tableau dans Bootstrap 4

Problème initial :

Dans Bootstrap 3, en utilisant le col-sm-xx la classe sur les éléments d’en-tête de tableau (TH) permet un redimensionnement facile des colonnes. Cependant, cela ne fonctionne plus dans Bootstrap 4. Cet article propose des solutions pour obtenir des fonctionnalités similaires.

Solution 1 : Assurer la classe de table

Vérifiez que votre table a la table classe appliquée. Les tables Bootstrap 4 sont « opt-in », ce qui signifie que cette classe doit être ajoutée pour activer le comportement souhaité.

Solution 2 : utiliser la réinitialisation CSS

Pour garantir un affichage correct de largeurs de colonnes, ajoutez le CSS suivant :

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

Solution 3 : Classe de bloc en ligne

Pour empêcher les colonnes de prendre des largeurs incorrectes, appliquez le d-inline -block class aux cellules du tableau.

Solution 4 : Dimensionnement des classes utilitaires

Bootstrap 4 inclut des classes utilitaires de dimensionnement qui peuvent être utilisées pour définir la largeur des colonnes :

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

Solution 5 : Flexbox

Pour une flexibilité accrue, pensez à utiliser flexbox sur les lignes du tableau et les classes de grille 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!