表格组件用法指南
- 基础结构：使用
.table 类定义基础表格
- 表格变体：应用
.-striped（条纹）、.-compact（紧凑）、.-highlight（高亮）等类快速切换表格风格
- 滚动与容器：将表格放入
.table-container 中实现水平滚动；使用 .sticky-table-container 增强垂直滚动体验
- 交互功能：
- 为表头添加
.sortable 类实现点击排序
- 使用
.action-buttons 类为操作列添加按钮组
- 空状态表格：在tbody中使用
.table-empty 类的单元格，并可添加"添加数据"按钮
- 加载状态表格：添加
.table-loading 类显示骨架屏效果
- 视觉增强：
- 使用
.status 类（配合 .active、.warning、.danger、.inactive）为状态列添加色彩标识
- 粘性表头：表格默认支持表头粘性定位，在滚动时保持可见
- 响应式设计：为表格添加
.responsive-table 类，在移动端自动转换为卡片式布局
- 数据管理：点击空状态下的"添加数据"按钮可打开模态框添加新数据
基础表格
基础表格提供清晰的数据展示结构，包含表头和表体，行悬停时有轻微上浮效果。
| ID |
名称 |
分类 |
价格 |
库存 |
| 001 |
智能手表 |
电子产品 |
¥1299 |
120 |
| 002 |
无线耳机 |
电子产品 |
¥799 |
85 |
| 003 |
机械键盘 |
电脑配件 |
¥499 |
60 |
| 004 |
游戏鼠标 |
电脑配件 |
¥299 |
95 |
表格变体
条纹表格
使用 .-striped 类为表格添加斑马条纹效果，提高可读性。
| 用户ID |
用户名 |
邮箱 |
注册日期 |
角色 |
| 1001 |
张小明 |
zhang@example.com |
2023-01-15 |
管理员 |
| 1002 |
李华 |
li@example.com |
2023-02-20 |
编辑 |
| 1003 |
王芳 |
wang@example.com |
2023-03-10 |
用户 |
| 1004 |
赵强 |
zhao@example.com |
2023-04-05 |
用户 |
| 1005 |
陈静 |
chen@example.com |
2023-05-22 |
编辑 |
紧凑表格
使用 .-compact 类减小表格内边距，适合数据密集型展示。
| 产品ID |
名称 |
销量 |
增长率 |
趋势 |
| P001 |
智能手机 |
12,543 |
+12.5% |
↑ |
| P002 |
平板电脑 |
8,921 |
+8.3% |
↑ |
| P003 |
笔记本电脑 |
5,678 |
-3.2% |
↓ |
| P004 |
智能音箱 |
9,342 |
+15.7% |
↑ |
| P005 |
智能灯泡 |
15,678 |
+22.1% |
↑ |
强调表格
使用 .-highlight 类为表头添加强调色，突出显示。
| 订单号 |
客户名称 |
订单金额 |
支付状态 |
发货状态 |
| ORD-2023-0001 |
北京科技有限公司 |
¥12,580.00 |
已支付 |
已发货 |
| ORD-2023-0002 |
上海贸易公司 |
¥8,950.00 |
已支付 |
已发货 |
| ORD-2023-0003 |
广州电子有限公司 |
¥15,620.00 |
已支付 |
待发货 |
| ORD-2023-0004 |
深圳科技公司 |
¥9,850.00 |
未支付 |
待支付 |
高级表格功能
状态标签表格
使用 .status 类为状态列添加色彩标识，直观展示不同状态。
| 任务ID |
任务名称 |
负责人 |
优先级 |
状态 |
截止日期 |
| T-001 |
首页设计改版 |
张小明 |
高 |
进行中 |
2023-06-30 |
| T-002 |
用户管理功能开发 |
李华 |
中 |
进行中 |
2023-07-15 |
| T-003 |
性能优化 |
王芳 |
中 |
待审核 |
2023-06-20 |
| T-004 |
文档编写 |
赵强 |
低 |
已暂停 |
2023-07-30 |
| T-005 |
安全漏洞修复 |
陈静 |
高 |
紧急 |
2023-06-15 |
动作按钮表格
使用 .action-buttons 类为表格添加操作按钮组，方便用户进行快速操作。
| ID |
产品名称 |
价格 |
库存 |
状态 |
操作 |
| 1 |
智能手机 |
¥2,999 |
150 |
在售 |
|
| 2 |
平板电脑 |
¥1,999 |
80 |
在售 |
|
| 3 |
无线耳机 |
¥799 |
200 |
在售 |
|
| 4 |
智能手表 |
¥1,299 |
0 |
缺货 |
|
可排序表格
使用 .sortable 类使表头可点击排序，并显示排序图标。
| 产品名称 |
类别 |
价格 |
评分 |
销量 |
| 智能手机 Pro |
电子产品 |
¥3,999 |
4.8 |
12,543 |
| 笔记本电脑 Ultra |
电子产品 |
¥8,999 |
4.9 |
5,678 |
| 无线耳机 Pro |
配件 |
¥1,299 |
4.7 |
9,342 |
| 智能手表 Lite |
可穿戴设备 |
¥899 |
4.6 |
8,921 |
响应式表格
在大屏幕上保持传统表格布局，在小屏幕上自动转换为卡片式布局，提供更好的移动端体验。
响应式表格特点
- 在桌面端显示为标准表格布局，支持水平滚动
- 在移动端（800px以下）自动转换为更易读的卡片式布局
- 使用CSS Flexbox技术实现布局自适应
- 保持数据完整性和可读性，提供最佳用户体验
| 订单编号 |
客户名称 |
客户地址 |
联系电话 |
订单金额 |
支付方式 |
订单状态 |
下单时间 |
预计送达 |
操作 |
|
订单编号
ORD-2023-0001
|
客户名称
北京科技有限公司
|
客户地址
北京市朝阳区科技园A座1001室
|
联系电话
138****1234
|
订单金额
¥12,580.00
|
支付方式
在线支付
|
订单状态
已发货
|
下单时间
2023-06-01
|
预计送达
2023-06-05
|
操作
|
|
订单编号
ORD-2023-0002
|
客户名称
上海贸易公司
|
客户地址
上海市浦东新区贸易大厦B座2001室
|
联系电话
139****5678
|
订单金额
¥8,950.00
|
支付方式
银行转账
|
订单状态
已发货
|
下单时间
2023-06-02
|
预计送达
2023-06-06
|
操作
|
|
订单编号
ORD-2023-0003
|
客户名称
广州电子有限公司
|
客户地址
广州市天河区电子城C座3001室
|
联系电话
137****9012
|
订单金额
¥15,620.00
|
支付方式
在线支付
|
订单状态
待发货
|
下单时间
2023-06-03
|
预计送达
2023-06-08
|
操作
|
|
订单编号
ORD-2023-0004
|
客户名称
深圳科技公司
|
客户地址
深圳市南山区科技园D座4001室
|
联系电话
136****3456
|
订单金额
¥9,850.00
|
支付方式
在线支付
|
订单状态
待支付
|
下单时间
2023-06-04
|
预计送达
2023-06-09
|
操作
|
高级响应式表格
基于参考文章实现的高级响应式表格，在移动端使用Flexbox重新排列数据，提供更好的移动端体验。请调整浏览器窗口大小查看效果。
响应式表格实现说明
- 在桌面端显示为标准表格布局
- 在移动端（800px以下）自动转换为卡片式布局
- 使用CSS Flexbox技术实现布局转换
- 保留数据上下文，确保在任何设备上都能清晰理解数据含义
| 产品名称 |
类别 |
价格 |
库存 |
评分 |
销售状态 |
|
产品名称
智能手机 Pro
|
类别
电子产品
|
价格
¥3,999
|
库存
120
|
评分
4.8
|
销售状态
热销
|
|
产品名称
笔记本电脑 Ultra
|
类别
电子产品
|
价格
¥8,999
|
库存
50
|
评分
4.9
|
销售状态
热销
|
|
产品名称
无线耳机 Pro
|
类别
配件
|
价格
¥1,299
|
库存
200
|
评分
4.7
|
销售状态
热销
|
|
产品名称
智能手表 Lite
|
类别
可穿戴设备
|
价格
¥899
|
库存
0
|
评分
4.6
|
销售状态
缺货
|
粘性表头演示
按照
参考文章 实现的简单粘性表头效果，只需要在thead元素上添加 position: sticky; 和 top: 0; 属性。
表格状态
空状态
当表格没有数据时的展示样式。
加载状态
当表格数据正在加载时的展示样式。