Aller au contenu
Bibliotheque UIJABS

Tableaux et listes 15 variantes

Un tableau sert a COMPARER des lignes entre elles. Si l'utilisateur ne compare pas, une liste de cartes est plus lisible. Regle tenue partout : sous 640 px le tableau devient une pile de cartes. Un tableau qui defile lateralement sur telephone est un tableau perdu.

A. Tableaux

Densites, zebrures, tri, selection, colonne figee, ligne depliante, totaux, bascule en cartes sur mobile.

ReferenceClientStatutMontant
2026-103Krissi JulienSigne4 280,00 EUR
2026-118Martin SophieEnvoye1 890,00 EUR
2026-121Durand PaulBrouillon12 400,00 EUR
Tableau de base

Le socle : en-tetes, lignes, colonnes de nombres alignees a droite en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Reference</th><th>Client</th><th>Statut</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr><td><code>2026-103</code></td><td>Krissi Julien</td><td><span class="doc-etiq doc-etiq--ok">Signe</span></td><td class="tbl__nombre">4 280,00 EUR</td></tr>
      <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td><span class="doc-etiq doc-etiq--attente">Envoye</span></td><td class="tbl__nombre">1 890,00 EUR</td></tr>
      <tr><td><code>2026-121</code></td><td>Durand Paul</td><td><span class="doc-etiq doc-etiq--neutre">Brouillon</span></td><td class="tbl__nombre">12 400,00 EUR</td></tr>
    </tbody>
  </table>
</div>
.tbl code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-soft); }
w-full text-sm [&_th]:bg-slate-50 [&_th]:p-3 [&_th]:text-left [&_td]:border-t [&_td]:p-3
ReferenceClientMontant
2026-103Krissi Julien4 280,00
2026-118Martin Sophie1 890,00
ReferenceClientMontant
2026-103Krissi Julien4 280,00
2026-118Martin Sophie1 890,00
Densites

Trois densites pour le meme tableau. Le mode compact sert aux ecrans de saisie, le mode confortable aux consultations sur tablette.

Voir le codeMasquer le code 
<div class="demo-col demo-col--large">
  <div class="tbl__cadre"><table class="tbl tbl--compact">
    <thead><tr><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody><tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
    <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr></tbody></table></div>
  <div class="tbl__cadre"><table class="tbl tbl--confort">
    <thead><tr><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody><tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
    <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr></tbody></table></div>
</div>
.tbl--compact th, .tbl--compact td { padding: 6px var(--sp-3); font-size: var(--fs-xs); }
.tbl--confort th, .tbl--confort td { padding: var(--sp-4) var(--sp-3); }
[&_td]:py-1.5 (compact) / [&_td]:py-4 (confortable)
PieceReferenceQtePU
Pompe a chaleur 11 kWPAC-11-M13 200,00
Ballon tampon 50 LBT-501340,00
Raccord cuivre 16 mmRC-16124,20
Gaine isoleeGI-2018 m6,90
Lignes zebrees et bordures

La zebrure aide a suivre une ligne longue. Au-dela de 5 colonnes elle vaut mieux qu'une bordure verticale, qui hache la lecture.

Voir le codeMasquer le code 
<div class="demo-col demo-col--large">
  <div class="tbl__cadre"><table class="tbl tbl--zebre">
    <thead><tr><th>Piece</th><th>Reference</th><th class="tbl__nombre">Qte</th><th class="tbl__nombre">PU</th></tr></thead>
    <tbody>
      <tr><td>Pompe a chaleur 11 kW</td><td><code>PAC-11-M</code></td><td class="tbl__nombre">1</td><td class="tbl__nombre">3 200,00</td></tr>
      <tr><td>Ballon tampon 50 L</td><td><code>BT-50</code></td><td class="tbl__nombre">1</td><td class="tbl__nombre">340,00</td></tr>
      <tr><td>Raccord cuivre 16 mm</td><td><code>RC-16</code></td><td class="tbl__nombre">12</td><td class="tbl__nombre">4,20</td></tr>
      <tr><td>Gaine isolee</td><td><code>GI-20</code></td><td class="tbl__nombre">18 m</td><td class="tbl__nombre">6,90</td></tr>
    </tbody>
  </table></div>
</div>
.tbl--zebre tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--c-surface-2) 60%, var(--c-surface)); }
.tbl--zebre tbody tr:hover { background: var(--c-surface-3); }
.tbl--lignes td, .tbl--lignes th { border-right: 1px solid var(--c-border); }
.tbl--lignes td:last-child, .tbl--lignes th:last-child { border-right: none; }
[&_tbody_tr:nth-child(odd)]:bg-slate-50/60
2026-121Durand Paul12 400,0002/09
2026-103Krissi Julien4 280,0012/08
2026-118Martin Sophie1 890,0029/08
En-tetes triables

La fleche indique le sens actif ; les colonnes inactives montrent un chevron pale au survol. aria-sort porte l'etat pour les lecteurs d'ecran.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr>
      <th><button class="btn btn--tri">Reference <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 9 4-4 4 4M16 15l-4 4-4-4"/></svg></button></th>
      <th><button class="btn btn--tri">Client <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 9 4-4 4 4M16 15l-4 4-4-4"/></svg></button></th>
      <th aria-sort="descending"><button class="btn btn--tri is-actif">Montant <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button></th>
      <th><button class="btn btn--tri">Date <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 9 4-4 4 4M16 15l-4 4-4-4"/></svg></button></th>
    </tr></thead>
    <tbody>
      <tr><td><code>2026-121</code></td><td>Durand Paul</td><td class="tbl__nombre">12 400,00</td><td>02/09</td></tr>
      <tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td><td>12/08</td></tr>
      <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td><td>29/08</td></tr>
    </tbody>
  </table>
</div>
.tbl th:has(.btn--tri) { padding: 0; }
.tbl .btn--tri { width: 100%; justify-content: flex-start; height: 38px; border-radius: 0; padding: 0 var(--sp-3); }
.tbl th[aria-sort] .btn--tri { color: var(--c-primary-ink); background: var(--c-primary-soft); }
.tbl th[aria-sort="descending"] .btn--tri svg { transform: rotate(180deg); }
[&_th]:p-0 [&_button]:w-full [&_button]:justify-start aria-sort:text-blue-700
ReferenceClientMontant
2026-103Krissi Julien4 280,00
2026-118Martin Sophie1 890,00
2026-121Durand Paul12 400,00
Selection de lignes

La case de l'en-tete coche tout ce qui est VISIBLE, pas tout ce qui existe : la distinction doit etre dite quand un filtre est actif.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr>
      <th style="width:40px"><label class="coche"><input type="checkbox"><span class="coche__boite"></span></label></th>
      <th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th>
    </tr></thead>
    <tbody>
      <tr class="is-choisie"><td><label class="coche"><input type="checkbox" checked><span class="coche__boite"></span></label></td><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
      <tr><td><label class="coche"><input type="checkbox"><span class="coche__boite"></span></label></td><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr>
      <tr class="is-choisie"><td><label class="coche"><input type="checkbox" checked><span class="coche__boite"></span></label></td><td><code>2026-121</code></td><td>Durand Paul</td><td class="tbl__nombre">12 400,00</td></tr>
    </tbody>
  </table>
</div>
.tbl tbody tr:has(input:checked), .tbl tbody tr.is-choisie { background: var(--c-primary-soft); }
.tbl tbody tr:has(input:checked):hover { background: color-mix(in srgb, var(--c-primary-soft) 80%, var(--c-primary)); }
[&_tr:has(:checked)]:bg-blue-50
ClientReferenceVilleOperationStatutMontant HTTVATTC
Krissi Julien2026-103Neuilly-sur-MarnePAC air/eauSigne4 000,005,5 %4 220,00
Martin Sophie2026-118ColombesChauffe-eauEnvoye1 790,0010 %1 969,00
Colonne figee

Beaucoup de colonnes sur grand ecran : la premiere reste visible pendant le defilement lateral, sinon on ne sait plus quelle ligne on lit.

Voir le codeMasquer le code 
<div class="tbl__cadre tbl__cadre--defile">
  <table class="tbl tbl--fige">
    <thead><tr><th>Client</th><th>Reference</th><th>Ville</th><th>Operation</th><th>Statut</th><th class="tbl__nombre">Montant HT</th><th class="tbl__nombre">TVA</th><th class="tbl__nombre">TTC</th></tr></thead>
    <tbody>
      <tr><th scope="row">Krissi Julien</th><td><code>2026-103</code></td><td>Neuilly-sur-Marne</td><td>PAC air/eau</td><td><span class="doc-etiq doc-etiq--ok">Signe</span></td><td class="tbl__nombre">4 000,00</td><td class="tbl__nombre">5,5 %</td><td class="tbl__nombre">4 220,00</td></tr>
      <tr><th scope="row">Martin Sophie</th><td><code>2026-118</code></td><td>Colombes</td><td>Chauffe-eau</td><td><span class="doc-etiq doc-etiq--attente">Envoye</span></td><td class="tbl__nombre">1 790,00</td><td class="tbl__nombre">10 %</td><td class="tbl__nombre">1 969,00</td></tr>
    </tbody>
  </table>
</div>
.tbl__cadre--defile { overflow-x: auto; }
.tbl--fige th:first-child, .tbl--fige tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  text-align: left;
  font-weight: var(--fw-semi);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  box-shadow: 1px 0 0 var(--c-border);
}
.tbl--fige thead th:first-child { background: var(--c-surface-2); z-index: 2; }
.tbl--fige tbody tr:hover th { background: var(--c-surface-2); }
overflow-x-auto [&_th:first-child]:sticky [&_th:first-child]:left-0 [&_th:first-child]:bg-white
ReferenceClientMontant
2026-103Krissi Julien4 280,00
Operation
PAC air/eau 11 kW
Pose prevue
24 septembre 2026
Equipe
Nord - Sophie M.
Aide
MaPrimeRenov 2 400 EUR
2026-118Martin Sophie1 890,00
Ligne depliante

Le detail sans quitter la liste. Le chevron pivote, et la ligne ouverte reste visuellement rattachee a son detail.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th style="width:40px"></th><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr class="is-ouverte"><td><button class="btn btn--icone btn--fantome btn--sm" aria-expanded="true" aria-label="Replier"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button></td><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
      <tr class="tbl__detail"><td></td><td colspan="3">
        <dl class="tbl__detail-liste">
          <div><dt>Operation</dt><dd>PAC air/eau 11 kW</dd></div>
          <div><dt>Pose prevue</dt><dd>24 septembre 2026</dd></div>
          <div><dt>Equipe</dt><dd>Nord - Sophie M.</dd></div>
          <div><dt>Aide</dt><dd>MaPrimeRenov 2 400 EUR</dd></div>
        </dl>
      </td></tr>
      <tr><td><button class="btn btn--icone btn--fantome btn--sm" aria-expanded="false" aria-label="Deplier"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button></td><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr>
    </tbody>
  </table>
</div>
.tbl [aria-expanded] svg { transition: transform var(--t-base); }
.tbl [aria-expanded="true"] svg { transform: rotate(180deg); }
.tbl tbody tr.is-ouverte { background: var(--c-surface-2); }
.tbl__detail td { background: var(--c-surface-2); border-top: none; }
.tbl__detail-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: 0; }
.tbl__detail-liste dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }
.tbl__detail-liste dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
[&_button[aria-expanded=true]_svg]:rotate-180 [&_.detail]:bg-slate-50
PosteQtePU HTTotal HT
Pompe a chaleur 11 kW13 200,003 200,00
Main d'oeuvre2 j400,00800,00
Total HT4 000,00
TVA 5,5 %220,00
Total TTC4 220,00
Ligne de totaux

Sous les lignes, jamais melangee a elles. Fond distinct, texte gras, et le pied reste visible si le tableau defile.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Poste</th><th class="tbl__nombre">Qte</th><th class="tbl__nombre">PU HT</th><th class="tbl__nombre">Total HT</th></tr></thead>
    <tbody>
      <tr><td>Pompe a chaleur 11 kW</td><td class="tbl__nombre">1</td><td class="tbl__nombre">3 200,00</td><td class="tbl__nombre">3 200,00</td></tr>
      <tr><td>Main d'oeuvre</td><td class="tbl__nombre">2 j</td><td class="tbl__nombre">400,00</td><td class="tbl__nombre">800,00</td></tr>
    </tbody>
    <tfoot>
      <tr><td colspan="3">Total HT</td><td class="tbl__nombre">4 000,00</td></tr>
      <tr><td colspan="3">TVA 5,5 %</td><td class="tbl__nombre">220,00</td></tr>
      <tr class="tbl__total"><td colspan="3">Total TTC</td><td class="tbl__nombre">4 220,00</td></tr>
    </tfoot>
  </table>
</div>
.tbl tfoot td { background: var(--c-surface-2); font-weight: var(--fw-semi); border-top: 1px solid var(--c-border); }
.tbl tfoot td:first-child { text-align: right; color: var(--c-text-soft); }
.tbl__total td { font-size: var(--fs-lg); font-weight: 800; color: var(--c-text); border-top: 2px solid var(--c-border-strong); }
[&_tfoot]:bg-slate-50 [&_tfoot_tr:last-child]:text-base [&_tfoot_tr:last-child]:font-extrabold
ReferenceClientVilleMontant
2026-103Krissi JulienNeuilly-sur-Marne4 280,00 EUR
2026-118Martin SophieColombes1 890,00 EUR
Tableau responsive

Sous 640 px chaque ligne devient une carte, l'intitule de colonne passe a gauche de la valeur. Le tableau reste lisible sans defilement lateral.

Voir le codeMasquer le code 
<div class="tbl__cadre">
  <table class="tbl tbl--cartes">
    <thead><tr><th>Reference</th><th>Client</th><th>Ville</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr><td data-col="Reference"><code>2026-103</code></td><td data-col="Client">Krissi Julien</td><td data-col="Ville">Neuilly-sur-Marne</td><td data-col="Montant" class="tbl__nombre">4 280,00 EUR</td></tr>
      <tr><td data-col="Reference"><code>2026-118</code></td><td data-col="Client">Martin Sophie</td><td data-col="Ville">Colombes</td><td data-col="Montant" class="tbl__nombre">1 890,00 EUR</td></tr>
    </tbody>
  </table>
</div>
@media (max-width: 640px) {
  .tbl--cartes thead { display: none; }
  .tbl--cartes, .tbl--cartes tbody, .tbl--cartes tr, .tbl--cartes td { display: block; width: 100%; }
  .tbl--cartes tr { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--c-border); }
  .tbl--cartes td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; border: none; text-align: left; }
  .tbl--cartes td::before { content: attr(data-col); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text-muted); }
  .tbl--cartes .tbl__nombre { text-align: right; }
}
max-sm:[&_thead]:hidden max-sm:[&_td]:flex max-sm:[&_td]:justify-between max-sm:[&_td]:before:content-[attr(data-col)]

B. Listes

L'alternative au tableau quand on ne compare pas colonne par colonne : lignes, groupes colles, reordonnancement, listes de description.

Liste de lignes

L'alternative au tableau quand on ne compare pas colonne par colonne. Plus lisible sur telephone, plus souple a mettre en page.

Voir le codeMasquer le code 
<ul class="liste">
  <li><a href="#">
    <span class="personne__avatar">JK</span>
    <span class="liste__bloc"><strong>Krissi Julien</strong><small>Neuilly-sur-Marne (93) - PAC air/eau</small></span>
    <span class="liste__droite"><strong>4 280 EUR</strong><span class="doc-etiq doc-etiq--ok">Signe</span></span>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
  </a></li>
  <li><a href="#">
    <span class="personne__avatar personne__avatar--vert">MS</span>
    <span class="liste__bloc"><strong>Martin Sophie</strong><small>Colombes (92) - chauffe-eau</small></span>
    <span class="liste__droite"><strong>1 890 EUR</strong><span class="doc-etiq doc-etiq--attente">Envoye</span></span>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
  </a></li>
</ul>
.liste { list-style: none; margin: 0; padding: 0; width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.liste > li + li { border-top: 1px solid var(--c-border); }
.liste a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast);
}
.liste a:hover { background: var(--c-surface-2); }
.liste a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.liste__bloc { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.liste__bloc strong { font-size: var(--fs-md); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__bloc small  { font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.liste__droite strong { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.liste > li > a > svg:last-child { width: 17px; height: 17px; color: var(--c-text-muted); flex: none; }
@media (max-width: 560px) { .liste__droite { align-items: flex-end; } .liste__bloc small { white-space: normal; } }
divide-y rounded-xl border [&_a]:flex [&_a]:items-center [&_a]:gap-3 [&_a]:p-3

Aujourd'hui

Demain

Liste avec en-tetes colles

Repertoire, agenda, journal. L'intitule du groupe reste visible tant qu'on est dedans : on sait toujours quel jour ou quelle lettre on lit.

Voir le codeMasquer le code 
<div class="liste-groupes">
  <h4>Aujourd'hui</h4>
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Pose PAC - Krissi</strong><small>08:30 - Neuilly-sur-Marne</small></span><span class="doc-etiq doc-etiq--ok">Confirme</span></a></li>
    <li><a href="#"><span class="liste__bloc"><strong>Visite technique - Durand</strong><small>14:00 - Le Raincy</small></span><span class="doc-etiq doc-etiq--attente">A confirmer</span></a></li>
  </ul>
  <h4>Demain</h4>
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Entretien annuel - Martin</strong><small>09:00 - Colombes</small></span><span class="doc-etiq doc-etiq--ok">Confirme</span></a></li>
  </ul>
</div>
.liste-groupes { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.liste-groupes h4 {
  position: sticky; top: 0; z-index: 2;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0;
  background: var(--c-bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.liste-groupes h4:first-child { margin-top: 0; }
[&>h4]:sticky [&>h4]:top-0 [&>h4]:z-10 [&>h4]:bg-white [&>h4]:py-2
  • Depose ancienne chaudiere1 jour400,00
  • Pose unite exterieure1 jour800,00
  • Mise en service0,5 jour200,00
Liste ordonnable

Reorganiser des postes de devis, des etapes. La poignee est explicite : rendre toute la ligne glissable empeche la selection du texte.

Voir le codeMasquer le code 
<ul class="liste liste--ordonnable">
  <li><span class="liste__poignee" aria-label="Deplacer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></span><span class="liste__bloc"><strong>Depose ancienne chaudiere</strong><small>1 jour</small></span><span class="tbl__nombre">400,00</span></li>
  <li class="is-attrapee"><span class="liste__poignee" aria-label="Deplacer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></span><span class="liste__bloc"><strong>Pose unite exterieure</strong><small>1 jour</small></span><span class="tbl__nombre">800,00</span></li>
  <li><span class="liste__poignee" aria-label="Deplacer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></span><span class="liste__bloc"><strong>Mise en service</strong><small>0,5 jour</small></span><span class="tbl__nombre">200,00</span></li>
</ul>
.liste--ordonnable > li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-surface); }
.liste__poignee { color: var(--c-text-muted); cursor: grab; flex: none; touch-action: none; }
.liste__poignee svg { width: 17px; height: 17px; }
.liste__poignee:active { cursor: grabbing; }
.liste--ordonnable > li.is-attrapee {
  background: var(--c-primary-soft);
  box-shadow: var(--sh-2);
  opacity: .95;
}
[&_li]:flex [&_li]:items-center [&_li]:gap-3 [&_li]:p-3 [&_.poignee]:cursor-grab
Reference
2026-103
Client
Krissi Julien
Adresse du chantier
12 rue des Lilas, 93330 Neuilly-sur-Marne
Operation
Pompe a chaleur air/eau 11 kW
Montant TTC
4 280,00 EUR
Statut
Signe le 12 aout 2026
Liste de description

Fiche recapitulative : etiquette a gauche, valeur a droite. Sur mobile l'etiquette passe au-dessus plutot que de comprimer la valeur.

Voir le codeMasquer le code 
<dl class="desc">
  <div><dt>Reference</dt><dd><code>2026-103</code></dd></div>
  <div><dt>Client</dt><dd>Krissi Julien</dd></div>
  <div><dt>Adresse du chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd></div>
  <div><dt>Operation</dt><dd>Pompe a chaleur air/eau 11 kW</dd></div>
  <div><dt>Montant TTC</dt><dd><strong>4 280,00 EUR</strong></dd></div>
  <div><dt>Statut</dt><dd><span class="doc-etiq doc-etiq--ok">Signe le 12 aout 2026</span></dd></div>
</dl>
.desc { width: 100%; margin: 0; display: flex; flex-direction: column; }
.desc > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-border);
}
.desc > div:first-child { border-top: none; }
.desc dt { font-size: var(--fs-sm); color: var(--c-text-muted); }
.desc dd { margin: 0; font-size: var(--fs-md); color: var(--c-text); }
@media (max-width: 560px) { .desc > div { grid-template-columns: 1fr; gap: 3px; } }
grid grid-cols-[200px_1fr] gap-y-3 max-sm:grid-cols-1 [&_dt]:text-slate-500
24 dossiers
Barre d'outils de tableau

Au-dessus du tableau : recherche, filtres, densite, export. Le compte de resultats est affiche a cote, sinon un filtre trop restrictif passe inapercu.

Voir le codeMasquer le code 
<div class="tbl-outils">
  <label class="doc-recherche"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="search" placeholder="Rechercher un dossier"></label>
  <button class="btn btn--secondaire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8v6l-4 2v-8Z"/></svg> Filtres <span class="btn__badge">2</span></button>
  <span class="cat-head__spacer"></span>
  <span class="tbl-outils__compte">24 dossiers</span>
  <div class="btn-segmente"><button class="btn is-actif" aria-label="Vue tableau"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg></button><button class="btn" aria-label="Vue grille"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></button></div>
  <button class="btn btn--secondaire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
</div>
.tbl-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.tbl-outils__compte { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text-muted); white-space: nowrap; }
.tbl-outils .doc-recherche { max-width: 260px; }
flex flex-wrap items-center gap-2 border-b pb-3
1 a 10 sur 24 dossiers
Pied de tableau

Compte affiche, choix du nombre de lignes, pagination. Toujours preciser « 1 a 10 sur 24 », pas seulement le numero de page.

Voir le codeMasquer le code 
<div class="tbl-pied">
  <span>1 a 10 sur 24 dossiers</span>
  <label class="tbl-pied__par">Lignes
    <div class="saisie-select"><select class="saisie"><option>10</option><option>25</option><option>50</option></select><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></div>
  </label>
  <nav class="btn-pagination" aria-label="Pagination">
    <button class="btn btn--icone btn--secondaire btn--sm" disabled aria-label="Precedent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
    <button class="btn btn--sm is-actif" aria-current="page">1</button>
    <button class="btn btn--sm">2</button>
    <button class="btn btn--sm">3</button>
    <button class="btn btn--icone btn--secondaire btn--sm" aria-label="Suivant"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
  </nav>
</div>
.tbl-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.tbl-pied__par { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tbl-pied__par .saisie-select { width: auto; }
.tbl-pied__par .saisie { height: 32px; width: 74px; font-size: var(--fs-sm); }
flex flex-wrap items-center justify-between gap-3 border-t p-3 text-sm