3.4 — Tableaux

⏱️ TL;DR — La classe de base est .table. On y ajoute des variantes : table-striped (rayures), table-hover (surbrillance), table-bordered, table-sm (compact), des couleurs (table-primary, table-dark), et table-responsive pour le défilement horizontal sur petit écran.

🎯 Objectifs

• Styliser un tableau avec les variantes.
• Colorer lignes et cellules.
• Rendre un tableau responsive.

Base

<table class="table">
  <thead>
    <tr><th>Nom</th><th>Rôle</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>Admin</td></tr>
    <tr><td>Bob</td><td>Éditeur</td></tr>
  </tbody>
</table>

Variantes combinables

<table class="table table-striped table-hover table-bordered table-sm">
  …
</table>

• table-striped / table-striped-columns : rayures (lignes / colonnes).
• table-hover : surbrillance au survol.
• table-bordered / table-borderless : bordures.
• table-sm : version compacte.
• align-middle : centrage vertical des cellules.

Couleurs

<table class="table">
  <tr class="table-primary"><td>Ligne colorée</td></tr>
  <tr><td class="table-success">Cellule colorée</td></tr>
</table>
 
<!-- tout le tableau en sombre -->
<table class="table table-dark">…</table>

Les couleurs contextuelles (table-primary, -success, -danger, -warning, -info, -light, -dark) s’appliquent à <tr>, <td> ou <th>.

Tableau responsive

Enveloppez le tableau pour un scroll horizontal quand il est trop large :

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

Variantes par breakpoint : table-responsive-md (scroll seulement en dessous de md).

En-tête et pied

<thead class="table-light">…</thead>
<tfoot>…</tfoot>

⚠️ Piège — Le défilement de table-responsive peut couper une modale ou un dropdown ouvert dans une cellule (à cause de overflow). Pour des actions par ligne, préférez un dropdown qui s’échappe du conteneur (option Popper), ou sortez l’action du tableau.

💡 Pour un dev React — Pour un tableau riche (tri, pagination, filtres), Bootstrap ne fournit que le style. Combinez-le avec une lib de table (TanStack Table) : vous gardez le markup <table className="table table-hover"> et déléguez la logique à la lib.

✏️ Exercices

1. Un tableau compact, rayé, avec surbrillance au survol.

2. Rendre ce tableau défilable horizontalement sur mobile uniquement.

🧠 Quiz de révision

🎉 Fin de la Partie 3 ! Partie suivante : Partie 4 — Composants essentiels