Les tableaux

Documentation et exemples pour le style opt-in des tableaux (compte tenu de leur utilisation courante dans les plugins JavaScript) avec Bootstrap.

Sur cette page

Aperçu

En raison de l'utilisation généralisée des éléments <table> dans les widgets tiers tels que les calendriers et les sélecteurs de dates, les tableaux de Bootstrap sont opt-in. Ajoutez la classe de base .table à n'importe quel <table>, puis étendez-la avec nos classes de modificateurs facultatives ou nos styles personnalisés. Tous les styles de tableau ne sont pas hérités dans Bootstrap, ce qui signifie que tous les tableaux imbriqués peuvent être stylisés indépendamment du parent.

En utilisant le balisage de table le plus basique, voici à quoi ressemblent les tables basées sur .table dans Bootstrap.

#	D'abord	Dernier	Gérer
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variantes

Utilisez des classes contextuelles pour colorer des tableaux, des lignes de tableau ou des cellules individuelles.

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>

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 indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par d'autres moyens, tels que du texte supplémentaire masqué avec la classe .visually-hidden.

Tableaux accentué

Rangées rayées

Utilisez .table-striped pour ajouter des rayures zébrées à n'importe quelle ligne de tableau dans <tbody>.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped">
  ...
</table>

Ces classes peuvent également être ajoutées aux variantes de table :

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-success table-striped">
  ...
</table>

Lignes flottantes

Ajoutez .table-hover pour activer un état de survol sur les lignes de tableau dans un fichier .

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class=.table-hover>
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Ces rangées flottantes peuvent également être combinées avec la variante rayée :

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Tableaux actifs

Mettez en surbrillance une ligne ou une cellule de tableau en ajoutant une .table-active classe.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Comment fonctionnent les variantes et les tableaux accentués ?

Pour les tableaux accentués (lignes rayées, lignes flottantes et tables actives), nous avons utilisé certaines techniques pour que ces effets fonctionnent pour toutes nos variantes de table :

Nous commençons par définir l'arrière-plan d'une cellule de tableau avec la propriété personnalisée --bs-table-bg. Toutes les variantes de tableau définissent ensuite cette propriété personnalisée pour coloriser les cellules du tableau. De cette façon, nous n'aurons pas de problèmes si des couleurs semi-transparentes sont utilisées comme arrière-plan de tableau.
Ensuite, nous ajoutons une ombre de boîte en encart sur les cellules du tableau avec box-shadow : inset 0 0 0 9999px var(--bs-table-accent-bg); pour superposer n'importe quel spécifié background-color. Parce que nous utilisons une grande diffusion et aucun flou, la couleur sera monotone. Étant donné que --bs-table-accent-bg n'est pas défini par défaut, nous n'avons pas d'ombre de boîte par défaut.
Lorsque les classes .table-striped, .table-hover ou .table-active sont ajoutées, le -- bs-table-accent-bg est défini sur une couleur semi-transparente pour coloriser l'arrière-plan.
Pour chaque variante de tableau, nous générons une couleur --bs-table-accent-bg avec le contraste le plus élevé en fonction de cette couleur. Par exemple, la couleur d'accent pour .table-primary est plus foncée tandis que .table-dark a une couleur d'accent plus claire.
Les couleurs du texte et des bordures sont générées de la même manière et leurs couleurs sont héritées par défaut.

Dans les coulisses, cela ressemble à ceci :

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Bordures de tableau

Tableau bordé

Ajouter .table-bordered des bordures sur tous les côtés du tableau et des cellules.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered">
  ...
</table>

Des utilitaires de couleur de bordure peuvent être ajoutés pour changer les couleurs :

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Tableaux sans bordures

Ajouter .table-borderless pour un tableau sans bordures.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-borderless">
  ...
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Petit tableau

Ajouter .table-sm pour rendre .table plus compact en coupant toutes les cellules padding endeux.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Alignement vertical

Les cellules de tableau de <thead> sont toujours alignées verticalement vers le bas. Les cellules de tableau dans <tbody> héritent de leur alignement de <table> et sont alignées en haut par défaut. Utilisez les classes d'alignement vertical pour réaligner si nécessaire.

Heading 1	Heading 2	Heading 3	Heading 4
Cette cellule hérite `vertical-align: middle;` du tableau	Cette cellule hérite `vertical-align: middle;` du tableau	Cette cellule hérite `vertical-align: middle;` du tableau	Voici un texte d'espace réservé, destiné à occuper un peu d'espace vertical, pour montrer comment l'alignement vertical fonctionne dans les cellules précédentes.
Cette cellule hérite `vertical-align: bottom;` de la ligne du tableau	Cette cellule hérite `vertical-align: bottom;` de la ligne du tableau	Cette cellule hérite `vertical-align: bottom;` de la ligne du tableau	Voici un texte d'espace réservé, destiné à occuper un peu d'espace vertical, pour montrer comment l'alignement vertical fonctionne dans les cellules précédentes.
Cette cellule hérite `vertical-align: middle;` du tableau	Cette cellule hérite `vertical-align: middle;` du tableau	Cette cellule est alignée vers le haut.	Voici un texte d'espace réservé, destiné à occuper un peu d'espace vertical, pour montrer comment l'alignement vertical fonctionne dans les cellules précédentes.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nidification

Les styles de bordure, les styles actifs et les variantes de tableau ne sont pas hérités par les tableaux imbriqués.

D'abord

En dernier

Gérer

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

Larry

the Bird

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Comment fonctionne l'imbrication

Pour empêcher tous les styles de fuir vers les tables imbriquées, nous utilisons le sélecteur de combinateur enfant (>) dans notre CSS. Puisque nous devons cibler tous les td et th dans les thead, tbody et tfoot, notre sélecteur aurait l'air assez long sans lui. En tant que tel, nous utilisons l'aspect plutôt étrange .table > :pas(légende) > * > * sélecteur pour cibler tous les tds et ths du .table, mais aucune des tables imbriquées potentielles.

Notez que si vous ajoutez des <tr> comme enfants directs d'une table, ces <tr> seront enveloppés dans un <tbody> ; par défaut, faisant ainsi fonctionner nos sélecteurs comme prévu.

Anatomie

Tête de tableau

Semblable aux tables et aux tables sombres, utilisez les classes de modificateurs .table-light ou .table-dark pour créer <thead> s apparaissent gris clair ou gris foncé.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Pied de tableau

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Footer	Footer	Footer	Footer

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Légendes

Un <caption> fonctionne comme un titre pour 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.

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Vous pouvez également placer le <caption> en haut du tableau avec .caption-top.

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table caption-top">
  <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>

Tableaux réactifs

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 un .table avec .table-responsive. Ou, choisissez un point d'arrêt maximum avec lequel avoir une table réactive jusqu'à en utilisant .table-responsive{-sm|-md|-lg|-xl|-xxl}.

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.

Toujours réactif

À travers chaque point d'arrêt, à utiliser .table-responsive pour les tableaux à défilement horizontal.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Spécifique au point d'arrêt

Utilisez .table-responsive{-sm|-md|-lg|-xl|-xxl} selon vos besoins pour créer des tableaux réactifs jusqu'à un point d'arrêt particulier. À partir de ce point d'arrêt, le tableau 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.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

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

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

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

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

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

Sass

Variables

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Boucle

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Personnalisation

Les variables factorielles ($table-striped-bg-factor, $table-active-bg-factor et $table-hover-bg- facteur) sont utilisés pour déterminer le contraste dans les variantes de tableau.
Outre la lumière & ; variantes de tableau sombres, les couleurs du thème sont éclaircies par la variable $table-bg-level.

Bootstrap 5.2 | Contenu

Tableaux