les tables

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 d' <table>éléments dans des widgets tiers tels que des calendriers et des sélecteurs de dates, les tables de Bootstrap sont opt-in . Ajoutez la classe de base .tableà any <table>, puis étendez-la avec nos classes de modificateurs facultatives ou nos styles personnalisés. Tous les styles de table ne sont pas hérités dans Bootstrap, ce qui signifie que toutes les tables imbriquées peuvent être stylisées indépendamment du parent.

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@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.

Classer	Titre	Titre
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 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 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 .visually-hiddenclasse.

Tableaux accentués

Rangées rayées

Utilisez .table-stripedpour 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		@Twitter

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

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

Lignes flottantes

Ajoutez .table-hoverpour 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		@Twitter

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@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-activeclasse.

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@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>

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@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 hoverable et tables actives ), nous avons utilisé quelques 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 --bs-table-bgpropriété personnalisée. 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'avons pas de problèmes si des couleurs semi-transparentes sont utilisées comme arrière-plan de table.
Ensuite, nous ajoutons une ombre de boîte en médaillon sur les cellules du tableau avec box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);une couche au-dessus de tout spécifié background-color. Parce que nous utilisons une grande diffusion et aucun flou, la couleur sera monotone. Puisque --bs-table-accent-bgn'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-hoverou sont ajoutées, la est définie sur une couleur semi-transparente pour coloriser l'arrière-plan..table-active--bs-table-accent-bg
Pour chaque variante de tableau, nous générons une --bs-table-accent-bgcouleur avec le contraste le plus élevé en fonction de cette couleur. Par exemple, la couleur d'accentuation de .table-primaryest plus foncée alors que la couleur d'accentuation est plus .table-darkclaire.
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, ça ressemble à ça :

@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

Tableaux bordés

Ajoutez .table-bordereddes 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		@Twitter

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

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

Tableaux sans bordures

Ajouter .table-borderlesspour un tableau sans bordures.

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

Petites tables

Ajouter .table-smpour rendre .tableplus compact en coupant toutes les cellules paddingen deux.

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

Alignement vertical

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

Rubrique 1	Rubrique 2	Rubrique 3	Rubrique 4
Cette cellule hérite `vertical-align: middle;`de la table	Cette cellule hérite `vertical-align: middle;`de la table	Cette cellule hérite `vertical-align: middle;`de la table	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;`de la table	Cette cellule hérite `vertical-align: middle;`de la table	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.

Première

Dernier

Gérer

Marquer

Otto

@mdo

Entête	Entête	Entête
UN	Première	Dernier
B	Première	Dernier
C	Première	Dernier

Larry

l'oiseau

@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 éviter que des styles ne fuient vers des tables imbriquées, nous utilisons le >sélecteur de combinateur enfant ( ) dans notre CSS. Puisque nous devons cibler tous les tds et ths dans les thead, tbodyet tfoot, notre sélecteur aurait l'air assez long sans cela. En tant que tel, nous utilisons le .table > :not(caption) > * > *sélecteur plutôt étrange pour cibler tous les tds et ths du .table, mais aucune des tables imbriquées potentielles.

Notez que si vous ajoutez <tr>s en tant qu'enfants directs d'une table, ceux <tr>-ci seront enveloppés dans a <tbody>par défaut, ce qui fera fonctionner nos sélecteurs comme prévu.

Anatomie

Tête de table

Semblable aux tables et aux tables sombres, utilisez les classes de modificateur .table-lightou .table-darkpour 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	@Twitter

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

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter

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

Pied de table

#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@Twitter
Bas de page	Bas de page	Bas de page	Bas de page

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

Légendes

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.

Liste des utilisateurs
#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry l'oiseau		@Twitter

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

Vous pouvez également mettre le <caption>sur le dessus de la table avec .caption-top.

Liste des utilisateurs
#	Première	Dernier	Gérer
1	Marquer	Otto	@mdo
2	Jacob	Thornton	@gros
3	Larry	l'oiseau	@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 a .tableavec .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|-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-responsivepour 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>

Spécifique au point d'arrêt

Utilisez .table-responsive{-sm|-md|-lg|-xl|-xxl}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

#	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

#	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

#	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

#	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

#	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">
  <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>

Toupet

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& $table-hover-bg-factor) sont utilisées pour déterminer le contraste dans les variantes de tableau.
Outre les variantes de table claires et sombres, les couleurs du thème sont éclaircies par la $table-bg-levelvariable.