les tables
Documentation et exemples pour le style opt-in des tableaux (compte tenu de leur utilisation courante dans les plugins JavaScript) avec Bootstrap.
En raison de l'utilisation généralisée de tableaux dans des widgets tiers tels que des calendriers et des sélecteurs de dates, nous avons conçu nos tableaux pour qu'ils soient opt-in . Ajoutez simplement la classe de base .table
à n'importe quel fichier <table>
, puis étendez-le avec des styles personnalisés ou nos différentes classes de modificateurs incluses.
En utilisant le balisage de table le plus basique, voici à quoi .table
ressemblent les tables basées sur Bootstrap. Tous les styles de table sont hérités dans Bootstrap 4 , ce qui signifie que toutes les tables imbriquées seront stylées de la même manière que le parent.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Vous pouvez également inverser les couleurs (texte clair sur fond sombre) avec .table-dark
.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Semblable aux tables et aux tables sombres, utilisez les classes de modificateur .thead-light
ou .thead-dark
pour faire <thead>
apparaître s en gris clair ou foncé.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Utilisez .table-striped
pour ajouter des rayures zébrées à n'importe quelle ligne de tableau dans le fichier <tbody>
.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Ajoutez .table-bordered
des bordures sur tous les côtés du tableau et des cellules.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Ajouter .table-borderless
pour un tableau sans bordures.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
peut également être utilisé sur des tables sombres.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Ajoutez .table-hover
pour activer un état de survol sur les lignes de tableau dans un fichier <tbody>
.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Ajoutez .table-sm
pour rendre les tableaux plus compacts en coupant de moitié le rembourrage des cellules.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry l'oiseau |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Utilisez des classes contextuelles pour colorer des lignes de tableau ou des cellules individuelles.
Classer | Titre | Titre |
---|---|---|
Actif | Cellule | Cellule |
Défaut | Cellule | Cellule |
Primaire | Cellule | Cellule |
Secondaire | Cellule | Cellule |
Succès | Cellule | Cellule |
Danger | Cellule | Cellule |
Avertissement | Cellule | Cellule |
Info | Cellule | Cellule |
Lumière | Cellule | Cellule |
Sombre | Cellule | Cellule |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Les variantes d'arrière-plan de tableau standard ne sont pas disponibles avec le tableau sombre, cependant, vous pouvez utiliser des utilitaires de texte ou d'arrière-plan pour obtenir des styles similaires.
# | Titre | Titre |
---|---|---|
1 | Cellule | Cellule |
2 | Cellule | Cellule |
3 | Cellule | Cellule |
4 | Cellule | Cellule |
5 | Cellule | Cellule |
6 | Cellule | Cellule |
sept | Cellule | Cellule |
8 | Cellule | Cellule |
9 | Cellule | Cellule |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
Donner du sens aux technologies d'assistance
L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-only
classe.
Créez des tableaux réactifs en enveloppant tout .table
avec .table-responsive{-sm|-md|-lg|-xl}
, en faisant défiler le tableau horizontalement à chaque max-width
point d'arrêt jusqu'à (mais non compris) 576px, 768px, 992px et 1120px, respectivement.
Notez que puisque les navigateurs ne prennent actuellement pas en charge les requêtes de contexte de plage , nous contournons les limitations des préfixes min-
etmax-
des fenêtres avec des largeurs fractionnaires (qui peuvent se produire dans certaines conditions sur les appareils à haute résolution, par exemple) en utilisant des valeurs avec une plus grande précision pour ces comparaisons .
A <caption>
fonctionne comme le titre d'un tableau. Il aide les utilisateurs disposant de lecteurs d'écran à trouver un tableau, à comprendre de quoi il s'agit et à décider s'ils veulent le lire.
# | Première | Dernier | Gérer |
---|---|---|---|
1 | Marquer | Otto | @mdo |
2 | Jacob | Thornton | @gros |
3 | Larry | l'oiseau |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Les tableaux réactifs permettent de faire défiler facilement les tableaux horizontalement. Rendez n'importe quelle table réactive dans toutes les fenêtres en enveloppant a .table
avec .table-responsive
. Ou, choisissez un point d'arrêt maximal avec lequel avoir une table réactive jusqu'à en utilisant .table-responsive{-sm|-md|-lg|-xl}
.
Détourage vertical/troncature
Les tableaux réactifs utilisent overflow-y: hidden
, qui coupe tout contenu qui dépasse les bords inférieur ou supérieur du tableau. En particulier, cela peut couper les menus déroulants et autres widgets tiers.
À travers chaque point d'arrêt, à utiliser .table-responsive
pour les tableaux à défilement horizontal.
# | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre |
---|---|---|---|---|---|---|---|---|---|
1 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
2 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
3 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Utilisez .table-responsive{-sm|-md|-lg|-xl}
au besoin pour créer des tableaux réactifs jusqu'à un point d'arrêt particulier. À partir de ce point d'arrêt, la table se comportera normalement et ne défilera pas horizontalement.
Ces tableaux peuvent apparaître brisés jusqu'à ce que leurs styles réactifs s'appliquent à des largeurs de fenêtre spécifiques.
# | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre |
---|---|---|---|---|---|---|---|---|
1 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
2 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
3 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre |
---|---|---|---|---|---|---|---|---|
1 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
2 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
3 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre |
---|---|---|---|---|---|---|---|---|
1 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
2 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
3 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | Titre | Titre | Titre | Titre | Titre | Titre | Titre | Titre |
---|---|---|---|---|---|---|---|---|
1 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
2 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
3 | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule | Cellule |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>