Tablas y visualización de datos
Tabla de datos adaptable

Lista de pedidos que cambia automáticamente entre tablas de escritorio y tarjetas de información móviles.
HTMLCSSadaptableTabla
Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:
<!doctype html>
<html lang="es" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tabla de datos adaptable</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>Pedidos recientes</h1></div><div class="summary"><span>5 registros</span><span>Total ¥4,824</span></div></header>
    <div class="table-wrap">
      <table>
        <caption>Estado reciente de los pedidos</caption>
        <thead><tr><th>Pedido</th><th>Cliente</th><th>Fecha</th><th>Importe</th><th>Estado</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 de 12</td><td data-label="金额" class="price">¥1,280</td><td data-label="状态"><span class="status">Completado</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1047</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#876cb1">semana</i>Zhou Yu</span></td><td data-label="日期">7 de 11</td><td data-label="金额" class="price">¥890</td><td data-label="状态"><span class="status pending">Procesando</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 de 10</td><td data-label="金额" class="price">¥1,560</td><td data-label="状态"><span class="status">Completado</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1045</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#426b9b">Qué</i>He Chuan</span></td><td data-label="日期">7 de 9</td><td data-label="金额" class="price">¥456</td><td data-label="状态"><span class="status cancelled">Cancelado</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>Su Qing</span></td><td data-label="日期">7 de 8</td><td data-label="金额" class="price">¥638</td><td data-label="状态"><span class="status pending">Procesando</span></td></tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>