---
id: "table"
title: "表格文字、对齐与行密度"
category: "数据展示"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-table"
source_data: "../component-data.json"
official_components: ["table", "table-column"]
template_components: ["el-table", "el-table-column"]
scenario_count: 11
verification: "scenario-checklist-not-full-test-pass"
---

# 表格文字、对齐与行密度

专题 `table` · 数据展示 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`table`、`table-column`。

本页模板直接使用的 Element UI 标签：`el-table`、`el-table-column`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：普通数据默认使用白底、无斑马纹、统一左对齐的展示表格；表头参考46px、普通单行至少48px。当前上方示例可按数值排序，下方单独演示可增删的规则行。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 展示与编辑（用途） | 只读数据表与可输入规则行承担不同任务。 | 查阅已有记录用展示表；确需维护规则时用下方可编辑行组合，不能给所有数据单元格默认加输入框。 |
| 排序、选择等（功能配置） | 这些能力决定可以对数据做什么，不决定表格皮肤。 | 本页采用数值三态排序；行选择到会员列表核对，固定列到关联专题核对，未演示功能不算当前已采用。 |
| 行高与内距（尺寸规则） | 46px表头、至少48px数据行及16px左右内距保证阅读。 | 默认按公共密度；多行自然增高，文字仍14px/21px。模板中的库尺寸参数不是给使用方再选一套密度。 |
| 悬停、选中与排序结果（自动状态） | 鼠标位置、已选集合及排序值决定高亮。 | 启用对应功能后由实际操作产生状态；默认不加斑马纹，不手工把某行画成已选来强调内容。 |

使用边界：不要把有排序、可编辑、紧凑行高和浅蓝选中列为四种表格样式。

## 组件规则

- **TABLE-R01**：表头 14px / 600 / 21px、#303133，数据 14px / 400 / 21px、#303133；依已确认业务原型，表头、正文、金额及操作统一左对齐，单元格左右16px；不得让样板默认数值右对齐覆盖项目规则。
- **TABLE-R02**：普通单行参考最小 48px，表头参考 46px；多行内容自然增高，固定列和滚动列同高。单元格内距上下10px、左右16px。
- **TABLE-R03**：悬停与选中有区别；表头排序如启用，应准确标记升序、降序或未排序，并保留当前条件。样例为本地数值三态排序。
- **TABLE-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **TABLE-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **TABLE-R06**：【默认】数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。
- **TABLE-R07**：【行悬停 / 行选中】悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。
- **TABLE-R08**：【链接 / 空值】正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。
- **TABLE-R09**：【排序 / 焦点 / 只读】当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。
- **TABLE-R10**：【加载 / 失败】保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。
- **TABLE-R11**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。
- **TABLE-R12**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **TABLE-R13**：选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。
- **TABLE-R14**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。
- **TABLE-R15**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。
- **TABLE-R16**：可编辑行用稳定标识保持行值、错误和删除对象对应；添加行继承字段规则，不继承上一行数据。首行不可删等业务限制必须显示原因。
- **TABLE-R17**：计算结果保持正文色与只读说明，可以复制，不伪装成禁用输入。删除入口使用红色纯文字；未保存行与已保存记录均先进入统一确认流程，确认后再删除。支持撤销时，删除后另提供撤销入口。
- **TABLE-R18**：普通“处理中”使用正文深灰，不表示异常；只有实际警告才用警告橙。已完成状态可使用成功绿，并配明确文字。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **TABLE-S01**：接入验收按实际能力核对行选择、跨数据更新保留已选项、稳定行标识、行序号、展开行、树形表格和延迟加载；本页基础表格未提供的能力不计为已演示。
- [ ] **TABLE-S02**：当前示例核对本地数值排序的未排序/升序/降序，三者是点击表头后产生的状态。服务端排序、筛选及默认条件恢复仅在实际接入对应功能后验收。
- [ ] **TABLE-S03**：关联验收：固定表头、左右固定列、横向滚动、溢出内容提示、自定义列和合并单元格；按实际接入能力分别核对。
- [ ] **TABLE-S04**：关联/接入验收：合计到固定列、滚动与合计专题；行选择及禁用选择到业务列表；空数据、加载中、请求失败和性能仅在对应数据来源及状态实际接入后检查。
- [ ] **TABLE-S05**：可编辑单元格属于宿主组合能力，需独立提交 / 取消 / 校验合同
- [ ] **TABLE-S06**：本页检查普通表格文字、数值排序和新增规则行的适用颜色；行选中与固定操作列背景到会员列表验证。只有实际可编辑且接入校验的单元格才检查输入错误，不把共用矩阵全套到基础表。
- [ ] **TABLE-S07**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。
- [ ] **TABLE-S08**：关联验收（业务会员列表）：选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色；本页基础表格未提供行选择或固定操作列。
- [ ] **TABLE-S09**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。
- [ ] **TABLE-S10**：本页核对可增删规则行：首行删除不可用，新增行确认后移除、取消保留，并可撤销。附件移除和已保存记录的失败重试到上传与确认框专题验收，不计为本页基础表格能力。
- [ ] **TABLE-S11**：新增两行独立输入；首行删除禁用；删除指定新增行并撤销；序号改变后输入值仍属于原行。

### 专题验收重点

本页检查数值排序三态、表头与正文统一左对齐、长值不改变字号，并检查新增规则行的值与删除对象对应。关联验收：固定列滚动与合计到“固定列、滚动与合计”专题检查；行选中背景贯穿主体和固定操作列到业务会员列表检查。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<el-table :data="tableData" size="small" border style="width:100%">
<el-table-column prop="name" label="名称" min-width="120">
</el-table-column>
<el-table-column prop="amount" label="数值" sortable align="left" header-align="left" min-width="100">
</el-table-column>
<el-table-column prop="state" label="状态" min-width="100">
<template slot-scope="scope">
<span :class="scope.row.state==='已完成'?'success':''">{{scope.row.state}}</span>
</template>
</el-table-column>
</el-table>
<p class="help">本页演示数值排序及下方可增删规则行。固定列滚动与合计见<a href="#spec-table-boundary">固定列、滚动与合计</a>；行选中及固定操作列背景同步需到<a href="../showcase/index.html#members">会员列表</a>复核。</p>
<!-- reference-pattern-editable-rows-pattern -->
<section class="reference-supplement">
<h4>可增删规则行</h4>
<editable-rows-pattern>
</editable-rows-pattern>
<p class="reference-note">参考截图用于提取场景结构；切换、校验、撤销等演示行为按本规范定义。<a href="https://wt37gq.axshare.com/#g=1&amp;id=te6pby&amp;p=规则配置" target="_blank" rel="noopener noreferrer">查看参考页</a>
</p>
</section>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 9 / 23 / 64；DX size tokens；2026-09-15 参考抽样：https://wt37gq.axshare.com/#g=1&id=te6pby&p=规则配置。
- [打开本专题页面](../index.html#spec-table)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`table`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `editable-rows-pattern` 的实现：[reference-patterns.js](../reference-patterns.js)。

组合样式见 [reference-patterns.css](../reference-patterns.css)；来源及扩展范围见 [参考补充记录](../reference-supplements.md)。

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 默认 | 数据与标签 正文深灰 14px/400；标题 正文深灰 14px/600；底 白色，表头 浅灰背景，分隔 分隔灰。 |
| 行悬停 / 行选中 | 悬停 浅灰背景；选中 选中浅蓝，选中且悬停仍 选中浅蓝；勾选 主题蓝。默认不做斑马纹。 |
| 链接 / 空值 | 正文链接 操作蓝 14px/400；普通行操作 操作蓝 12px/400；危险删除/移除用错误红；无备注用“无” 空值灰 12px/400，0 仍 正文深灰。 |
| 排序 / 焦点 / 只读 | 当前排序图标 主题蓝；键盘 操作蓝 轮廓；静态或只读数据仍 正文深灰，整行不可因不可编辑而变灰。 |
| 加载 / 失败 | 保留表结构，转圈 主题蓝；失败短提示 错误红，写明原因与重试 操作蓝；金额不因正负自动变红绿。 |
| 固定列 / 操作列 | 选中底必须同步到主体、左/右固定列、操作列及其副本；选中且悬停仍为 选中浅蓝。横向滚动、全选、取消、展开增高后均不得断色。 |
| 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 |

本页基础表采用普通展示与数值排序；行选中颜色仅在启用选择功能后出现。会员列表中的选中底须覆盖主体与固定操作列；这些是功能对应状态，不是另选表格皮肤。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 会员列表组合列](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)
- [会员详情 · 返回原会员列表 · 组合字段表](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md)
- [新增账号 · 新增账号结果列表](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md)
- [存款记录 · 存款记录列表](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)
- [取款审核 · 取款审核列表](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md)
- [资料审核 · 资料审核列表](../../showcase/index.html#profile-audit) · [场景文档](../../showcase/docs/profile-audit.md)；落地范围：资料审核列表与详情中的普通待审核均使用正文深灰 #303133，不因尚未审核显示警告色；本例没有异常或逾期条件。审核通过使用成功语义，审核驳回使用错误语义，状态文字始终保留。
- [账户调整审核 · 待审核 / 审核记录列表](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md)
- [活动管理 · 活动列表](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md)
- [广告管理 · 广告列表](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)
- [公告管理 · 系统公告列表](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)
- [通知管理 · 站内消息列表 · 17列字段](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)
- [推广报表 · 日报 · 推广报表 · 日报预选视图（共用既有表格）](../../showcase/index.html#reports) · [场景文档](../../showcase/docs/reports.md)；落地范围：reports 保留为推广报表日报视图的兼容直达入口，与 agents 共用一个内嵌实例；首次直达及已访问后的 #reports 切换均预选日报，#agents 恢复共享实例的当前状态。18个场景标识包含共享实例的不同入口，不代表18个独立页面。 团队人数、德州人数、大厅人数、俱乐部主人数、俱乐部数量及局数按整数显示，0显示0；列表与总计使用相同精度。金额仍保留两位小数。此修复仅作用于派生页面的显示，不改变原始数值、查询与合计口径或导出数据。
- [推广报表 · 多级代理报表](../../showcase/index.html#agents) · [场景文档](../../showcase/docs/agents.md)；落地范围：团队人数、德州人数、大厅人数、俱乐部主人数、俱乐部数量及局数按整数显示，0显示0；列表与总计使用相同精度。金额仍保留两位小数。此修复仅作用于派生页面的显示，不改变原始数值、查询与合计口径或导出数据。
- [操作日志 · 操作日志结果列表](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md)
- [运营总览 · 留存、新鲜度与活跃度数据表](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md)
- [客服工单管理 · 工单列表与处理记录表](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)