Tableaux et affichage des données
Tableau de données adaptatif

Liste de commandes qui bascule automatiquement entre tableaux sur ordinateur et cartes d’information sur mobile.
HTMLCSSResponsiveTableau
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tableau de données adaptatif</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; padding: clamp(24px, 6vw, 64px) 18px; color: #202126; font-family: "Avenir Next", "Microsoft YaHei", sans-serif; background: #f4f1eb; }
    main { width: min(1060px, 100%); margin: auto; }
    header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 28px; }
    .eyebrow { color: #176c65; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
    h1 { margin: 8px 0 0; font: 700 clamp(36px, 6vw, 58px)/1 Georgia, "STSong", serif; }
    .summary { display: flex; gap: 12px; }
    .summary span { padding: 8px 12px; border: 1px solid #d5d0c7; border-radius: 999px; color: #6e6a62; font-size: 13px; background: #fff; }
    .table-wrap { overflow: hidden; border: 1px solid #d8d2c8; border-radius: 20px; background: #fff; box-shadow: 0 24px 54px rgba(46, 39, 30, .08); }
    table { width: 100%; border-collapse: collapse; }
    caption { padding: 0; font-size: 0; }
    th, td { padding: 18px 20px; text-align: left; border-bottom: 1px solid #ece8e1; }
    th { color: #77736b; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: #fbfaf7; }
    tr:last-child td { border-bottom: 0; }
    tbody tr { transition: background .18s ease; }
    tbody tr:hover { background: #f7fbfa; }
    .order { color: #176c65; font-family: ui-monospace, monospace; font-weight: 800; }
    .customer { display: flex; align-items: center; gap: 12px; font-weight: 750; }
    .avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; background: #176c65; }
    .price { font-weight: 800; font-variant-numeric: tabular-nums; }
    .status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #176c65; font-size: 12px; font-weight: 800; background: #e2f2ef; }
    .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .pending { color: #9b6718; background: #fff0cf; }
    .cancelled { color: #a3443b; background: #fae5e2; }
    @media (max-width: 720px) {
      .table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
      table, tbody, tr, td { display: block; width: 100%; }
      thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      tbody { display: grid; gap: 14px; }
      tr { padding: 8px 18px; border: 1px solid #d8d2c8; border-radius: 17px; background: #fff; box-shadow: 0 12px 28px rgba(46,39,30,.06); }
      td { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 0; text-align: right; }
      td::before { content: attr(data-label); color: #77736b; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
      .customer { justify-content: flex-end; }
    }
    @media (max-width: 480px) { header { display: block; } .summary { margin-top: 18px; flex-wrap: wrap; } }
  </style>
</head>
<body>
  <main>
    <header><div><span class="eyebrow">ORDER DESK / JULY</span><h1>Commandes récentes</h1></div><div class="summary"><span>5 commandes</span><span>Total ¥4,824</span></div></header>
    <div class="table-wrap">
      <table>
        <caption>État des commandes récentes</caption>
        <thead><tr><th>Commande</th><th>Client</th><th>Date</th><th>Montant</th><th>État</th></tr></thead>
        <tbody>
          <tr><td data-label="订单" class="order">#A-1048</td><td data-label="客户"><span class="customer"><i class="avatar">Lin</i>Lin Xia</span></td><td data-label="日期">7 mois 12 jour</td><td data-label="金额" class="price">¥1,280</td><td data-label="状态"><span class="status">Terminé</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1047</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#876cb1">semaine</i>Zhou Yu</span></td><td data-label="日期">7 mois 11 jour</td><td data-label="金额" class="price">¥890</td><td data-label="状态"><span class="status pending">En cours de traitement</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1046</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#c36b45">Chen</i>Chen Ye</span></td><td data-label="日期">7 mois 10 jour</td><td data-label="金额" class="price">¥1,560</td><td data-label="状态"><span class="status">Terminé</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1045</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#426b9b">He</i>He Chuan</span></td><td data-label="日期">7 mois 9 jour</td><td data-label="金额" class="price">¥456</td><td data-label="状态"><span class="status cancelled">Annulé</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1044</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#776d43">Su</i>Suqing</span></td><td data-label="日期">7 mois 8 jour</td><td data-label="金额" class="price">¥638</td><td data-label="状态"><span class="status pending">En cours de traitement</span></td></tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>