DATA TABLE

数据表格Data Table

结构化数据的标准呈现：表头一行 + 若干数据行，列宽按内容权重分配，数字右对齐。信息密度最高的展示形式。

效果预览

客户套餐状态金额

KKai Studio

团队版已付费¥ 1,299

LLin Design

专业版试用中¥ 299

MMomo Lab

免费版未激活¥ 0

适合用在哪

后台列表、订单/客户/日志管理、任何需要横向对比多条记录的场景。

容易踩的坑

用 div 模拟表格却不补 role 语义，读屏用户听不到行列关系。
移动端直接横向挤压所有列，数字被截断成省略号，应改为卡片或固定首列滚动。
长文本单元格不做截断与悬停全文，整行被撑高，列表节奏被打乱。

设计提示词 · Prompt

数据表格（Data Table）：外层圆角 10px、细描边、overflow:hidden。表头行用浅灰底（--bg2）、8.5px 大写字母、字距 0.03em、高度略矮于数据行。数据行用 CSS Grid 而非 <table> 更易控制（grid-template-columns 如 1.5fr 1fr .9fr .8fr），行高 25-40px、行间 1px 细线、最后一行去线。文本列左对齐、数值列右对齐并加 font-variant-numeric:tabular-nums 保证位数对齐。行 hover 时整行浅色底反馈。列宽一定要显式分配，不要靠内容撑。

Data Table: outer wrapper with 10px radius, thin border, overflow:hidden. The header row uses a light-gray background (--bg2), 8.5px uppercase letters with 0.03em letter spacing, and is slightly shorter than data rows. Build data rows with CSS Grid instead of <table> for easier control (grid-template-columns such as 1.5fr 1fr .9fr .8fr), row height 25-40px, 1px hairlines between rows, none after the last row. Left-align text columns; right-align numeric columns and add font-variant-numeric:tabular-nums so digits line up. On row hover, give the whole row a light background as feedback. Always assign column widths explicitly — never let content dictate them.

常见搭配

同一页面里经常和「数据表格」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

列排序Sortable Columns 行选择Row Selection 分页控件Pagination 表格空状态Table Empty State

演示 HTML 结构

<div class="s" style="width:100%">
  <div class="tb">
    <div class="tb__row tb__row--hd" style="grid-template-columns:1.5fr 1fr .85fr .8fr"><span>客户</span><span>套餐</span><span>状态</span><span class="tb__num">金额</span></div>
    <div class="tb__row" style="grid-template-columns:1.5fr 1fr .85fr .8fr"><div class="tb__u"><em>K</em><span class="tb__c">Kai Studio</span></div><span class="tb__c">团队版</span><span><span class="tb__badge">已付费</span></span><span class="tb__num">¥ 1,299</span></div>
    <div class="tb__row" style="grid-template-columns:1.5fr 1fr .85fr .8fr"><div class="tb__u"><em style="background:linear-gradient(135deg,#f59e0b,#ef4444)">L</em><span class="tb__c">Lin Design</span></div><span class="tb__c">专业版</span><span><span class="tb__badge tb__badge--y">试用中</span></span><span class="tb__num">¥ 299</span></div>
    <div class="tb__row" style="grid-template-columns:1.5fr 1fr .85fr .8fr"><div class="tb__u"><em style="background:linear-gradient(135deg,#06b6d4,#4f46e5)">M</em><span class="tb__c">Momo Lab</span></div><span class="tb__c">免费版</span><span><span class="tb__badge tb__badge--g">未激活</span></span><span class="tb__num">¥ 0</span></div>
  </div>
</div>