BOOTSTRAP TABLEAUX

Les tableaux en pleine largeur

La classe .table de Bootstrap permet de mettre en forme de manière sobre les
tableaux. Dans ces exemples, les tableaux sont placés dans une grille avec un
conteneur, une ligne et une colonne.
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th>Numéro</th>
<th>Titre</th>
<th>Auteur</th>
<th>Pages</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>La nuit</td>
<td>Bidule</td>
<td>234</td>
</tr>
<tr>
<td>2</td>
<td>L'aube</td>
<td>Truc</td>
<td>194</td>
</tr>
<tr>
<td>3</td>
<td>Le jour</td>
<td>Machin</td>
<td>334</td>
</tr>
<tr>
<td>4</td>
<td>Le crépuscule</td>
<td>Tartempion</td>
<td>234</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Notez que la largeur du tableau occupe 100% de la place disponible de son parent,
la boîte <div> de la colonne.
Voici les règles CSS utilisées pour la mise en forme de ce tableau :

1
 .table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
}
.table td, .table th {
padding: .75rem;
}
.table td, .table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}

Les tableaux à fond sombre

Si vous souhaitez avoir un tableau ayant un fond sombre, ajoutez la classe .table-
dark à l’élément <table> :
<table class="table table-dark">
...
</table>

La classe .table-dark ajoute ces propriétés :

.table-dark {
color: #fff;
background-color: #212529;
}
Les en-têtes de tableaux
Si vous avez opté pour un tableau classique, clair, vous pouvez afficher un en-tête
sombre avec l’ajout de la classe <thead class="thead-dark">. Et inversement, avec
un tableau sombre, vous pouvez afficher un en-tête clair avec <thead class="thead-
light">.
Les lignes en alternance

Pour avoir des lignes grises et blanches en alternance, ajoutez la classe .table-
striped à l’élément <table>.

<table class="table table-primary table-striped">

2
 ...
</table>
Voici l’affichage du tableau obtenu, avec ses lignes bleues plus foncés en alternance
:

Le fond grisé est appliqué aux éléments <td> avec le sélecteur : nth-of-type(odd) :
Voici la propriété de cette classe :
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}

Les tableaux encadrés

Pour avoir un tableau encadré, ajoutez la classe .table-bordered à l’élément <table>.

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

Voici la propriété utilisée pour la bordure dans cette classe :

.table-bordered {
border: 1px solid #de2e6;
}
Le survol des lignes

Vous pouvez activer une mise en évidence des lignes survolées par le pointeur de la
souris. Ajoutez la classe .table-hover à l’élément <table>.
<table class="table table-hover">
...
</table>
La classe .table-over provient du fichier _table.scss de Bootstrap qui permet de
personnaliser des variables utilisées pour la mise en forme :
.table-hover {
tbody tr {
@include hover {
background-color: $table-hover-bg;

3
 }
}
}

Les tableaux étroitisés

La classe .table-sm permet d’obtenir des largeurs de cellules plus petites en

diminuant le remplissage interne des cellules avec la propriété padding. Ajoutez cette
classe à l’élément <table>.
<table class="table table-sm">
...
</table>

La classe .table-sm provient du fichier _table.scss de Bootstrap qui permet de

personnaliser des variables utilisées pour la mise en forme :
.table-sm {
th,
td {
padding: $table-cell-padding-sm;
}
}
Les mises en évidence colorée

Vous pouvez utiliser sur les cellules (<td> et <th>) et/ou sur les lignes (<tr>), des
classes qui permettent d’afficher un fond coloré.
● La classe .active affiche un fond gris.

● La classe .primary affiche un fond bleu pâle.

● La classe .secondary affiche un fond gris clair.

● La classe .danger affiche un fond rouge clair.

● La classe .info affiche un fond vert pâle.

● La classe .light affiche un fond blanc.

● La classe .dark affiche un fond gris foncé.

La légende des tableaux

Pour ajouter une légende à vos tableaux, utilisez l’élément <caption>.

<table class="table">
<caption>Des livres à la bibliothèque</caption>
...
</table>

4
Voici les propriétés de l’élément caption :
caption {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
Les tableaux responsive

Pour que vos tableaux soient responsive, il faut ajouter la classe .table-responsive à
l’élément parent du tableau, l’élément <div> de la colonne de la grille dans cet
exemple.

<div class="container">
<div class="row">
<div class="col table-responsive">
<table class="table">
...
</table>
</div>
</div>
</div>
Cette classe va permettre d’utiliser une barre de défilement pour visualiser les
tableaux très larges.
Voici les propriétés de la classe .table-responsive :
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
Vous avez la possibilité de déterminer pour quelle taille d’écran, cette propriété doit
être active en ajoutant à la classe .table-responsive, les suffixes -sm, -md, -lg et -xl.
Transposer une table

5
Cela permet d’afficher une table dans l’autre sens pour les petits supports.
Dans les élements td ajouter la clause data-label
<tr>
<td data-label="Numero">1</td>
<td data-label="Titre">La nuit</td>
<td data-label="Auteur">Bidule</td>
<td data-label="Pages">234</td>

</tr>

Ajouter le css
@media screen and (max-width: 576px)
{
body {
font-size: 0.8em;}

.table thead {
display: none;
}
.table tr{
display: block;
margin-bottom: 40px;
}
.table td {
display: block;
text-align: right;
}
.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}

TP

Réaliser un tableau représentant une liste de votre choix et couleur de votre choix,
mais avec couleur alternée et responsive.
Uitliser le composant bootstrap-tables pour ajouter une recherche plein texte et un tri
sur les colonnes
https://bootstrap-table.com/
(Dans les exemples options de colonnes : triable et recherche)
Et appliquer la table transposée pour support <576px