DATA TABLE
展开行Expandable Row
点击行首的箭头，在行下方展开一块明细区展示详情。比跳转新页面轻，比弹窗更不打断上下文。
效果预览
订单状态金额
▶#2048 · Kai Studio已发货¥ 1,299
明细：轻量冲锋衣 × 1（¥ 699）· 速干内层 × 2（¥ 300 × 2）
收货：北京市朝阳区 · 顺丰 SF1234567890
收货：北京市朝阳区 · 顺丰 SF1234567890
▶#2047 · Lin Design待付款¥ 599
适合用在哪
列表里需要看少量详情才能决策的场景（订单明细、日志详情、任务子项）。
容易踩的坑
- 展开区内容要异步加载却没有骨架屏，展开瞬间高度跳动，下方行整体抖动。
- 只有行首小箭头可点，热区不足 24px，用户频繁点到整行触发其他操作。
- 展开内容太多（超过一屏），应改用抽屉或详情页，否则列表上下文丢失。
设计提示词 · Prompt
展开行（Expandable Row）：行首放一个 8-10px 的箭头/三角，展开时 rotate 90deg（0.2s 过渡）。展开区作为紧跟随的独立行（不放在原行内，避免影响列对齐），用浅灰底、内边距 8-11px、字号比正文小一号，内容可以是键值对栅格或子表格。展开状态给触发行加浅色底。无障碍上触发行加 aria-expanded 与 aria-controls，指向展开区的 id。允许同时展开多行时不需要额外状态；只允许一个时展开新行自动收起旧的。
Expandable Row: place an 8-10px arrow/triangle at the start of the row that rotates 90deg when expanded (0.2s transition). The expanded area is an independent row immediately following (not inside the original row, so column alignment isn't affected), with a light-gray background, 8-11px padding, and a font one size smaller than the body; content can be a key-value grid or a sub-table. While expanded, give the trigger row a light background. For accessibility, add aria-expanded and aria-controls to the trigger row, pointing to the expanded area's id. If multiple rows may be expanded at once, no extra state is needed; if only one is allowed, expanding a new row automatically collapses the old one.
常见搭配
同一页面里经常和「展开行」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="tb">
<div class="tb__row tb__row--hd" style="grid-template-columns:14px 1.5fr 1fr .8fr"><span></span><span>订单</span><span>状态</span><span class="tb__num">金额</span></div>
<div class="tb__row" style="grid-template-columns:14px 1.5fr 1fr .8fr"><span class="tb__caret is-on">▶</span><span class="tb__c">#2048 · Kai Studio</span><span class="tb__c">已发货</span><span class="tb__num">¥ 1,299</span></div>
<div class="tb__exp"><b>明细：</b>轻量冲锋衣 × 1（¥ 699）· 速干内层 × 2（¥ 300 × 2）<br><b>收货：</b>北京市朝阳区 · 顺丰 SF1234567890</div>
<div class="tb__row" style="grid-template-columns:14px 1.5fr 1fr .8fr"><span class="tb__caret">▶</span><span class="tb__c">#2047 · Lin Design</span><span class="tb__c">待付款</span><span class="tb__num">¥ 599</span></div>
</div>
</div>