Le Tutoriel de Bootstrap Table

Table basique
Header Color
Cell Color
Striped Table
Bordered Table
Borderless Table
Hoverable rows
Table .table-sm
Responsive Table
La taille du colonne

1. Table basique

Table est un des composants largement utilisé dans la page. Afin d'obtenir un tableau du style de Bootstrap il est assez simple. Vous appliquez uniquement la classe .table pour des étiquettes (tag) <table>, et quelques classes additionnelles pour créer un tableau désiré.

Appliquez la classe .table à la <table> vous obtiendrez le tableau le plus basique du style Bootstrap. L'illustration ci-dessous vous montrera la différence entre un tableau par défaut et celui qui est appliqué la classe .table:

La classe .table établit la largeur de 100% et l'arrière-plan transparent (transparent) pour le tableau, établit padding pour des cellules (cell), ...

basic-table-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Basic Bootstrap Table</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h2>Basic Bootstrap Table</h2>
         <table class="table">
            <thead>
               <tr>
                  <th>No</th>
                  <th>Language</th>
                  <th>Percent</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>Java</td>
                  <td>14.21%</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>C</td>
                  <td>11.03%</td>
               </tr>
               <tr>
                  <td>3</td>
                  <td>C++</td>
                  <td>5.60%</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

La classe .table applique l'arrière-plan transparent pour le tableau. Pourtant, si vous voulez obtenir une autre couleur de l'arrière-plan, vous pouvez utiliser quelques classes ci-dessous :

.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark
.table-muted
.table-white

2. Header Color

Vous pouvez installer la couleur de l'arrière-plan de Header du tableau en utilisant la classe .thead-dark ou la classe .thead-light pour l'étiquette <thead> :

.thead-dark .thead-light

<table class="table">
   <thead class="thead-dark">
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

En plus, afin d'établir la couleur d'arrière-plan de Header du tableau, vous pouvez utiliser également des classes ci-dessous :

.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark
.table-muted
.table-white

3. Cell Color

L'exemple suivant vous indique la manière d'établir la couleur d'arrière-plan pour les cellules du tableau :

.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark
.table-muted
.table-white

Background color on Cells

<table class="table">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th class="table-primary">Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td class="table-success">Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td class="table-warning">5.60%</td>
      </tr>
   </tbody>
</table>

4. Striped Table

L'utilisation de la classe .table-striped vous aide à créer un tableau à rayures (Striped table). Celà signifie que les lignes impaires et les lignes paires dans <tbody> auront une couleur d'arrière-plan différente. Cela aide les utilisateurs à observer facilement.

.table .table-striped

<table class="table table-striped">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

.table .table-striped .table-dark

<table class="table table-striped table-dark">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

5. Bordered Table

La classe .table-bordered créera une bordure (border) pour les 4 côtés de la table et tous les côtés de toutes les cellules du tableau.

.table .table-bordered

<table class="table table-bordered">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

.table .table-bordered .table-striped

.table .table-bordered .table-striped

<table class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

6. Borderless Table

La classe .table-borderless vous aide à créer un tablau sans bordure. Tous les côtés du tableau sont sans bordure (border) et toutes les cellules (cell) de la table le sont également.

.table .table-borderless

<table class="table table-borderless">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

L'utilisation de la classe .table-borderless + .table-dark crée un tableau sans bordure avec l'arrière-plan de couleur sombre.

.table .table-borderless .table-dark

<table class="table table-borderless table-dark">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

7. Hoverable rows

La classe .table-hover aide à créer des effets (effect) de changer la couleur de l'arrière-plan lorsque le curseur (pointer) se déplace sur la ligne (row) du tableau (Appliqué aux seulement des lignes dans <tbody>). Cet effet est illustré comme ci-dessous :

.table .table-hover

<table class="table table-hover">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

8. Table .table-sm

Bootstrap installe padding pour les cellules du tableau. Par défaut, la valeur est 0.75rem. Si vous avez besoin d'un tableau plus compact, utilisez la classe .table-sm. Cette classe réduit la moitié la valeur de padding. Ci-dessous, l'illustration d'un tableau sans utilisant de la classe .table-sm et un tableau qui utilise la classe .table-sm.

.table-sm

<table class="table table-bordered table-sm">
   <thead>
      <tr>
         <th>No</th>
         <th>Language</th>
         <th>Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

9. Responsive Table

Il vous semble difficile de créer un tableau adapté aux appareils ayant une largeur d'écran différente. Lorsque la largeur de l'appareil est de plus en plus petite, les colonnes du tableau essaient de réduire leur largeur. En effet, les colonnes ne peuvent pas réduire leur largeur à 0. Et lorsque le tableau ne pourra plus réduire sa largeur, la barre de défilement (scroll bar) située horizontalement sur le navigateur apparaîtra.

La solution de Bootstrap estd'utiliser une étiquette <div class="table-responsive[-sm|-md|-lg|-xl]"> pour envelopper (wrap) un tableau. La barre de défilement (scroll bar) horizontale apparaîtra sur l'étiquette <div> si le tableau ne peut pas réduire davantage sa largeur. Ainsi, la barre de défilement horizontale apparaîtra sur l'étiquette <div> au lieu d'apparaître sur le navigateur.

Classe Css	Description
.table-responsive	Si le tableau ne peut plus réduire sa largeur, la barre de défilement horizontale apparaîtra.
.table-responsive-sm	Si la largeur de l'appareil (ou du navigateur) est inférieure à 567px et que le tableau ne peut plus réduire sa largeur, la barre de défilement horizontale apparaîtra.
.table-responsive-md	Si la largeur de l'appareil (ou du navigateur) est inférieure à 768px et que le tableau ne peut plus réduire sa largeur, la barre de défilement horizontale apparaîtra.
.table-responsive-lg	Si la largeur de l'appareil (ou du navigateur) est inférieure à 992px et que le tableau ne peut plus réduire sa largeur, la barre de défilement horizontale apparaîtra.
.table-responsive-xl	Si la largeur de l'appareil (ou du navigateur) est inférieure à 1200px et que le tableau ne peut plus réduire sa largeur, la barre de défilement horizontale apparaîtra.

responsive-table-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Table</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h4>Responsive Table:</h4>
         <div class="table-responsive-sm">
            <table class="table table-bordered">
               <thead>
                  <tr>
                     <th>No</th>
                     <th>Language</th>
                     <th>Language Description</th>

                     <th>First Release</th>
                     <th>Author</th>
                     <th>Percent</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>1</td>
                     <td>Java</td>
                     <td>Java is a programming language and computing platform...
                     </td>
                     <td>1995</td>
                     <td>James Gosling</td>
                     <td>14.21%</td>
                  </tr>
               </tbody>
            </table>

         </div>
         <h3>Other Language</h3>
         <ul>
            <li>Go Language</li>
         </ul>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

10. La taille du colonne

Pour Google, j'ai trouvé quelques solutions pour configurer la largeur pour les colonnes d'un tableau dans Bootstrap. Cependant, après vérification, je trouve qu'une solution fonctionne bien avec Firefox mais elle ne fonctionne pas avec Chrome. Ci-dessous, je donne quelques exemples et solutions que je pense qu'ils sont les meilleurs :

Example 1:

Un tableau contient de 3 colonnes. La largeur de la première colonne est de 10%, celle du deuxième colonne est de 70% et celle de la troisième colonne est de 20%.

Solution : Utilisez style ="width: X%".

style="width: X%"

<table class="table table-bordered">
   <thead>
      <tr>
         <th style="width: 10%">No</th>
         <th style="width: 70%">Language</th>
         <th style="width: 20%">Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Java</td>
         <td>14.21%</td>
      </tr>
      <tr>
         <td>2</td>
         <td>C</td>
         <td>11.03%</td>
      </tr>
      <tr>
         <td>3</td>
         <td>C++</td>
         <td>5.60%</td>
      </tr>
   </tbody>
</table>

Example 2:

Vous avez un tableau de 3 colonnes et vous voulez :

Pour l'équipement avec la largeur de >= 567px	3 colonnes auront le taux de largeur de : 1:9:2
Pour l'équipement avec la largeur de < 567px	3 colonnes auront le taux de largeur de : 3:3:6

.d-flex + .col[-sm|-md|-lg|-xl]-*

<table class="table table-bordered">
   <thead>
      <tr class="d-flex">
         <th class="col-3 col-sm-1">No</th>
         <th class="col-3 col-sm-9">Language</th>
         <th class="col-6 col-sm-2">Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr class="d-flex">
         <td class="col-3 col-sm-1">1</td>
         <td class="col-3 col-sm-9">Java</td>
         <td class="col-6 col-sm-2">14.21%</td>
      </tr>
      <tr class="d-flex">
         <td class="col-3 col-sm-1">2</td>
         <td class="col-3 col-sm-9">C</td>
         <td class="col-6 col-sm-2">11.03%</td>
      </tr>
   </tbody>
</table>