Tableaux Bootstrap 5

Tableau de base

Un tableau Bootstrap 5 de base a un peu de marge interne et une ligne de séparation horizontale.

.table Ajouter des styles de base à la table :

Exemple

Essayez-le vous-même

Lignes avec bandes

.table-striped Ajouter des bandes de zèbre à la table :

Exemple

Essayez-le vous-même

Tableau avec bordure

.table-bordered Ajouter des bordures à toutes les cellules et lignes de la table :

Exemple

Essayez-le vous-même

Lignes avec effet de survol

.table-hover Ajouter un effet de survol (arrière-plan gris) aux lignes de table :

Exemple

Essayez-le vous-même

Tableau noir/dark

.table-dark Ajouter un arrière-plan noir à la table :

Exemple

Essayez-le vous-même

Tableau à bandes sombres

combiner .table-dark et .table-striped Pour créer un tableau à bandes sombres :

Exemple

Essayez-le vous-même

Tableau sombre avec effet de survol

.table-hover Ajouter un effet de survol (arrière-plan gris) aux lignes de table :

Exemple

Essayez-le vous-même

Tableau sans bordure

.table-borderless Supprimer les bordures des tables :

Exemple

Essayez-le vous-même

classes de contexte

Les classes de contexte peuvent être utilisées pour tout le tableau (<table>) et lignes de tableau (<tr>) ou cellule de tableau (<td>) colorées.

Exemple

Essayez-le vous-même

Classes de contexte disponibles :

Classe Description
.table-primary Bleu : indique une action importante.
.table-success Vert : indique un succès ou une action positive.
.table-danger Rouge : indique un danger ou un comportement négatif potentiel.
.table-info Bleu clair : indique des modifications ou des opérations neutres.
.table-warning Orange : indique un avertissement à prendre en compte.
.table-active Gris : applique la couleur au passage de la souris sur les lignes ou les cellules de tableau.
.table-secondary Gris : indique une action moins importante.
.table-light Fond de tableau ou de ligne de tableau de couleur claire.
.table-dark Fond de tableau ou de ligne de tableau de couleur foncée.

Couleur des en-têtes

Vous pouvez également utiliser n'importe quelle classe de contexte pour ajouter une couleur de fond uniquement aux en-têtes de table :

Exemple

Essayez-le vous-même

Tableau miniature

.table-sm La classe réduit la taille du tableau en réduisant la remplissage des cellules :

Exemple

Essayez-le vous-même

Tableau responsive

.table-responsive La classe ajoute une barre de défilement à la table au besoin (quand elle est trop grande horizontalement) :

Exemple

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Essayez-le vous-même

Vous pouvez également décider à quel moment la table doit obtenir une barre de défilement, en fonction de la largeur de l'écran :

Classe Largeur de l'écran
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Exemple

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

Essayez-le vous-même