Table

Composant de tableau de données. Supporte les variantes de bordure, le zébrage des lignes, le survol, les couleurs par élément et les modificateurs de taille via des variables CSS.

Stable Sans JS

Aperçu

LIVE PREVIEW — TABLE PAR DÉFAUT

Nom	Rôle	Âge
Alice	Développeuse front-end	28
Bruno	Designer UI	34
Clara	Chef de projet	41
Total	—	3 membres

LIVE PREVIEW — COULEURS & HOVER

Nom	Statut	Priorité	Score
Alice	Bloquée	Haute	42
Alice	Bloquée	Haute	42
Clara	En attente	Basse	61
Bruno	En cours	Moyenne	87
Denis	En cours	Haute	95
Eva	En attente	Critique	18
Léa	En attente	Basse	23
Moyenne	—	—	60.6

Structure HTML

CODE HTML

Colonne 1	Colonne 2	Colonne 3
Cellule header	Cellule données	Cellule données
Total	—	—

👉 Structure sémantique

Les sections <thead>, <tbody> et <tfoot> acceptent toutes les mêmes classes de couleur et de survol. Les paddings sont appliqués via les variables --table-padding-* sur chaque th et td.

Classes CSS

CLASSE	ÉLÉMENT	DESCRIPTION
`.table`	`<table>`	Classe de base. Applique `border-collapse: collapse`, la largeur à 100 % et les variables de bordure et de padding.
`.table-borderless`	`<table>`	Supprime toutes les bordures sur la table et ses cellules (`thead`, `tbody`, `tfoot`).
`.table-bordered`	`<table>`	Ajoute une bordure sur les quatre côtés de chaque cellule via les variables `--table-border-*`.
`.table-striped`	`<table>`	Zèbre les lignes paires du `tbody` via `--table-striped-background-color`.
`.table-striped-odd`	`<table>`	Zèbre les lignes impaires du `tbody`.
`.table-striped-column`	`<table>`	Zèbre les colonnes paires du `tbody`.
`.table-striped-column-odd`	`<table>`	Zèbre les colonnes impaires du `tbody`.
`.table-hover`	`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`	Applique `--table-hover-background-color` au survol. Peut être posé à n'importe quel niveau de l'arborescence du tableau.
`.table-{color}`	`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`	Applique la couleur de fond correspondante et adapte la couleur du texte via `--content-on-{color}`. Compatible avec `.table-hover`.
`.table-group-divider`	`<thead>`, `<tbody>`, `<tfoot>`	Ajoute une bordure épaisse sur le premier `<tr>` de la section via `--table-border-divider-*`.
`.table-responsive`	`<div>`	Wrapper. Active le défilement horizontal (`overflow-x: auto`) pour les tableaux larges sur petits écrans.

Variantes

Bordures

Trois comportements de bordure disponibles via les classes modificatrices.

BORDURES HTML

Zébrage

Quatre variantes de zébrage applicables indépendamment ou en combinaison.

ZÉBRAGE HTML

LIVE PREVIEW — ZÉBRAGE PAR LIGNE

Nom	Rôle	Âge
Alice	Développeuse front-end	28
Bruno	Designer UI	34
Clara	Chef de projet	41
Denis	Développeur back-end	29
Eva	QA Engineer	37

LIVE PREVIEW — ZÉBRAGE PAR COLONNE

Nom	Rôle	Département	Âge
Alice	Développeuse front-end	Tech	28
Bruno	Designer UI	Design	34
Clara	Chef de projet	Product	41
Denis	Développeur back-end	Tech	29
Eva	QA Engineer	Tech	37

Survol

.table-hover peut être appliqué à n'importe quel niveau de l'arborescence : sur la table entière, une section, une ligne ou une cellule individuelle.

HOVER HTML


<!-- Hover sur toute la table -->
<table class="table table-hover"></table>

<!-- Hover sur une section uniquement -->
<table class="table">
  <tbody class="table-hover"></tbody>
</table>

<!-- Hover sur une ligne -->
<tr class="table-hover"></tr>

<!-- Hover sur une cellule -->
<td class="table-hover"></td>

Couleurs

Les classes .table-{color} sont générées dynamiquement depuis la palette du projet. Elles s'appliquent à tous les niveaux : table, thead, tbody, tfoot, tr, th, td.

COULEURS HTML


<!-- Couleur sur la table entière -->
<table class="table table-primary"></table>

<!-- Couleur sur une section -->
<thead class="table-secondary"></thead>

<!-- Couleur sur une ligne -->
<tr class="table-danger"></tr>

<!-- Couleur sur une cellule -->
<td class="table-warning"></td>

<!-- Combinaison couleur + hover -->
<table class="table table-primary table-hover"></table>

⚠️ Hover sur cellules individuelles

Lorsque des cellules sont colorées individuellement (ex. : th.table-primary dans un tfoot) et qu'un parent porte .table-hover, deux effets de survol se superposent : celui de la cellule colorée et celui hérité du tr parent. Le résultat visuellement est un double hover non souhaité.

La solution recommandée — poser .table-hover directement sur les th et td. Sans parent .table-hover, seules les cellules qui portent explicitement la classe déclenchent leur propre effet de survol, sans aucune interférence. Cette approche fonctionne dans tous les cas, y compris avec des couleurs transparentes ou semi-transparentes.

Il existe une alternative : colorier toutes les cellules du tr individuellement. Si chaque th et td porte sa propre classe couleur, le hover coloré prend le dessus sur celui du tr de manière homogène. Cependant, si certaines couleurs sont transparentes, le hover du tr parent transparaît en dessous et crée un effet indésirable — c'est pourquoi cette approche n'est pas recommandée.

HOVER SUR CELLULES INDIVIDUELLES — SOLUTION RECOMMANDÉE HTML

Nom	Statut	Score
Alice	En cours	87
Moyenne	—	60.6

Séparateur de groupe

.table-group-divider ajoute une bordure renforcée sur la première ligne de la section ciblée.

GROUP DIVIDER HTML

Total	—

Tailles

Les modificateurs de taille s'appliquent directement sur <table> et ajustent les paddings de toutes les cellules via les tokens CSS dédiés.

LIVE PREVIEW — TAILLES

.table-sm

Nom	Rôle
Alice	Développeuse

.table-md

Nom	Rôle
Alice	Développeuse

.table-lg

Nom	Rôle
Alice	Développeuse

CSS Custom Properties

TOKEN	RÔLE
`--table-border-width`	Épaisseur des bordures
`--table-border-style`	Style de bordure (`solid`, `dashed`…)
`--table-border-color`	Couleur des bordures
`--table-border-divider-width`	Épaisseur de la bordure du séparateur de groupe
`--table-border-divider-style`	Style de la bordure du séparateur de groupe
`--table-border-divider-color`	Couleur de la bordure du séparateur de groupe
`--table-padding-y`	Padding vertical des cellules (taille par défaut)
`--table-padding-x`	Padding horizontal des cellules (taille par défaut)
`--table-padding-y-sm`	Padding vertical — taille sm
`--table-padding-x-sm`	Padding horizontal — taille sm
`--table-padding-y-md`	Padding vertical — taille md
`--table-padding-x-md`	Padding horizontal — taille md
`--table-padding-y-lg`	Padding vertical — taille lg
`--table-padding-x-lg`	Padding horizontal — taille lg
`--table-striped-background-color`	Couleur de fond des lignes ou colonnes zébrées
`--table-hover-background-color`	Couleur de fond au survol

EXEMPLE DE PERSONNALISATION CSS


                    /* Global variables */

                    :root {

                      --table-border-width: 1px;

                      --table-border-style: solid;

                      --table-border-color: #dee2e6;

                      --table-padding-y: 0.75rem;

                      --table-padding-x: 1rem;

                      --table-striped-background-color: rgba(0, 0, 0, 0.05);

                      --table-hover-background-color: rgba(0, 0, 0, 0.075);

                    }

Notes & bonnes pratiques

✅ À faire

Toujours envelopper le tableau dans .table-responsive pour garantir le défilement horizontal sur les petits écrans.

✅ À faire

Les classes .table-{color} et .table-hover peuvent se combiner à n'importe quel niveau (table, thead, tr, td…). L'ordre de spécificité est géré par les @layer CSS définis dans le SCSS.

⚠️ Attention

Le zébrage et le hover utilisent box-shadow: inset plutôt que background-color. Cela permet de superposer les couleurs sans écraser celles posées par .table-{color}. Ne pas remplacer cette technique par un background-color direct sur les cellules, au risque de casser les combinaisons de classes.

❌ À éviter

Ne pas appliquer plusieurs modificateurs de taille simultanément (.table-sm et .table-lg à la fois). Seul le dernier déclaré dans le CSS sera effectif.

Table · WEBDEV-UI DOCS / V1