Table ^commun

La conception des tableaux sous bootstrap est optionnelle : il est possible d'ajouter des classes pour gérer les bordures, les striped, l'aspect responsive, les couleurs, les tailles, etc...
Toutes les options sont cumulables.
Dans tous les cas, la classe de base .table est à mettre en place sur la balise table. L'ajout des styles personnalisés sera à mettre en place en fonction des besoins.

#	First	Last	Handle
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Il est possible de contextualiser les tableaux, les lignes de tableaux ou les cellules du tableau via l'ajout d'une classe associée aux contextes/thèmes de bootstrap pour gérer les background-color. Il suffit d'ajouter la classe .table-{contexte} sur les balises tr et/ou sur les balises td si l'on souhaite gérer uniquement une case en particulier.

Classe	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>

Possibilité d'alterner les lignes paires / impaires avec l'ajout de la classe .table-striped sur la balise table.

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

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

Possibilité d'alterner les lignes paires / impaires avec l'ajout de la classe .table-striped-columns sur la balise table.

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

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

Ces classes peuvent être combinées avec les variants de tableau.
Exemple en mode dark :

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

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

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

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

Possibilité d'avoir un effet au survol des lignes du tableau en ajoutant la classe .table-hover sur la balise table.

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

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

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

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

Mettez certaines cellules en surbrillance en lui ajoutant la classe .table-active. Ci-dessous un exemple sur un tr et sur un td.

#	First	Dernier	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

Possibilité d'ajouter des bordures avec la classe .table-bordered sur la balise table.

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

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

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

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

Possibilité de retirer les bordures avec la classe .table-borderless sur la balise table.

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

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

Possibilité d'avoir un tableau plus petit et "ramassé" en ajoutant la classe .table-sm sur la balise table.

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

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

Possibilité d'ajouter une bordure plus épaisse entre les groupes de tableaux thead - tbody - tfoot en ajoutant la classe .table-group-divider sur un des éléments cité.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

<table class="table">
  <thead>
    ...
  </thead>
  <tbody class="table-group-divider">
    ...
  </tbody>
</table>

Possibilité de customiser l'entête .table-dark ou .table-light sur thead.

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

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

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

#	First	Dernier	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social
Pied de page	Pied de page	Pied de page	Pied de page

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

Utilisez la balise caption pour titrer le tableau.

Liste des utilisateurs

#	First	Dernier	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

Possibilité de placer le titre au-dessus avec la classe .caption-top sur le caption.

Liste des utilisateurs

#	First	Dernier	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	John	Doe	@social

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

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

Il est possible de mettre un place un scroll horizontal sur les tableaux qui atteignent leur limite en largeur. Il suffit d'encapsuler le tableau dans une div avec la classe .table-responsive

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

Il est possible de déclencher le comportement responsive d'un tableau jusqu'à un breakpoint défini. Utilisez la classe .table-responsive{-sm|-md|-lg|-xl|-xxl} sur le dive conteneur du tableau. Ci-dessous les 5 exemples de sm à xxl.

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

De nombreuses variables sont paramétrables :

$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:                 var(--#{$prefix}emphasis-color);
$table-bg:                    var(--#{$prefix}body-bg);
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor);

$table-border-factor:         .2;
$table-border-width:          var(--#{$prefix}border-width);
$table-border-color:          var(--#{$prefix}border-color);

$table-striped-order:         odd;
$table-striped-columns-order: even;

$table-group-separator-color: currentcolor;

$table-caption-color:         var(--#{$prefix}secondary-color);

$table-bg-scale:              -80%;