Maison > interface Web > tutoriel CSS > Comment redimensionner les colonnes du tableau dans Bootstrap 4 ?

Comment redimensionner les colonnes du tableau dans Bootstrap 4 ?

Susan Sarandon
Libérer: 2024-10-29 19:38:30
original
484 Les gens l'ont consulté

How to Resize Table Columns in 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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal