响应式数据表格
桌面端表格与移动端信息卡片自动切换的订单列表。
启用 JavaScript 后可编辑、运行和保存此案例。固定源码如下：
<!doctype html>
<html lang="zh-Hans" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>响应式数据表格</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>近期订单</h1></div><div class="summary"><span>5 笔订单</span><span>合计 ¥4,824</span></div></header>
<div class="table-wrap">
<table>
<caption>近期订单状态</caption>
<thead><tr><th>订单</th><th>客户</th><th>日期</th><th>金额</th><th>状态</th></tr></thead>
<tbody>
<tr><td data-label="订单" class="order">#A-1048</td><td data-label="客户"><span class="customer"><i class="avatar">林</i>林夏</span></td><td data-label="日期">7 月 12 日</td><td data-label="金额" class="price">¥1,280</td><td data-label="状态"><span class="status">已完成</span></td></tr>
<tr><td data-label="订单" class="order">#A-1047</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#876cb1">周</i>周屿</span></td><td data-label="日期">7 月 11 日</td><td data-label="金额" class="price">¥890</td><td data-label="状态"><span class="status pending">处理中</span></td></tr>
<tr><td data-label="订单" class="order">#A-1046</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#c36b45">陈</i>陈野</span></td><td data-label="日期">7 月 10 日</td><td data-label="金额" class="price">¥1,560</td><td data-label="状态"><span class="status">已完成</span></td></tr>
<tr><td data-label="订单" class="order">#A-1045</td><td data-label="客户"><span class="customer"><i class="avatar" style="background:#426b9b">何</i>何川</span></td><td data-label="日期">7 月 9 日</td><td data-label="金额" class="price">¥456</td><td data-label="状态"><span class="status 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">苏</i>苏青</span></td><td data-label="日期">7 月 8 日</td><td data-label="金额" class="price">¥638</td><td data-label="状态"><span class="status pending">处理中</span></td></tr>
</tbody>
</table>
</div>
</main>
</body>
</html>