Tables and data display
Responsive Data Table

An order list that automatically switches between desktop tables and mobile info cards.
HTMLCSSResponsiveTable
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Data Table</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>Recent Orders</h1></div><div class="summary"><span>5 orders</span><span>Total ¥4,824</span></div></header>
    <div class="table-wrap">
      <table>
        <caption>Recent order status</caption>
        <thead><tr><th>Orders</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</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 month 12 day</td><td data-label="金额" class="price">¥1,280</td><td data-label="状态"><span class="status">Completed</span></td></tr>
          <tr><td data-label="订单" class="order">#A-1047</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#876cb1">Week</i>Zhou Yu</span></td><td data-label="日期">7 month 11 day</td><td data-label="金额" class="price">¥890</td><td data-label="状态"><span class="status pending">Processing</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 10</td><td data-label="金额" class="price">¥1,560</td><td data-label="状态"><span class="status">Completed</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 month 9 day</td><td data-label="金额" class="price">¥456</td><td data-label="状态"><span class="status cancelled">Cancelled</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 month 8 day</td><td data-label="金额" class="price">¥638</td><td data-label="状态"><span class="status pending">Processing</span></td></tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>