Bootstrap 4 tableaux
Tableau de base de Bootstrap 4
Une table Bootstrap 4 de base a un rembourrage léger et des séparateurs horizontaux.
La .tableclasse ajoute un style de base à une table :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Lignes rayées
La .table-stripedclasse ajoute des rayures zébrées à un tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableau bordé
La .table-borderedclasse ajoute des bordures sur tous les côtés du tableau et des cellules :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Survoler les lignes
La .table-hoverclasse ajoute un effet de survol (couleur de fond grise) sur les lignes du tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableau noir/foncé
La .table-darkclasse ajoute un fond noir au tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Table à rayures sombres
Combinez .table-darket .table-stripedpour créer une table à rayures sombres :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Table sombre flottante
La .table-hoverclasse ajoute un effet de survol (couleur de fond grise) sur les lignes du tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableau sans bordure
La .table-borderlessclasse supprime les bordures du tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Classes contextuelles
Les classes contextuelles peuvent être utilisées pour colorer tout le tableau ( <table>), les lignes du tableau ( <tr>) ou les cellules du tableau ( <td>).
Exemple
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
Les classes contextuelles utilisables sont :
| Classer | La description |
|---|---|
.table-primary |
Bleu : Indique une action importante |
.table-success |
Vert : Indique une action réussie ou positive |
.table-danger |
Rouge : Indique une action dangereuse ou potentiellement négative |
.table-info |
Bleu clair : Indique un changement informatif neutre ou une action |
.table-warning |
Orange : indique un avertissement qui pourrait nécessiter votre attention |
.table-active |
Gris : applique la couleur de survol à la ligne ou à la cellule du tableau |
.table-secondary |
Gris : Indique une action légèrement moins importante |
.table-light |
Table gris clair ou fond de rangée de table |
.table-dark |
Table gris foncé ou fond de rangée de table |
Couleurs des têtes de table
La .thead-darkclasse ajoute un arrière-plan noir aux en-têtes de tableau et la .thead-lightclasse ajoute un arrière-plan gris aux en-têtes de tableau :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Petite table
La .table-smclasse rend la table plus petite en coupant de moitié le rembourrage des cellules :
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableaux réactifs
La .table-responsiveclasse ajoute une barre de défilement au tableau en cas de besoin (lorsqu'il est trop grand horizontalement):
Exemple
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Vous pouvez également décider quand le tableau doit avoir une barre de défilement, en fonction de la largeur de l'écran :
| Classer | Largeur de l'écran |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
Exemple
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>