Skip to main content

Table 表格

展示行列数据。


何时使用

  • 当有大量结构化的数据需要展现时。
  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

基本用法

简单的表格,最后一列是操作

可以固定列的表格

适用于列数较多的数据,支持横向滚动查看表格内容,能够方便查看数据间的对应关系。

交互样式

「选中」以及「选中悬浮」状态

操作数量最多显示「2」条,超出的操作则用更多「… 」进行折叠

如果该单元格无信息时,用「—」表示

边距以及尺寸

每个单元格最小宽度可显示「10」个字符,继续缩小表格底部出现滚动条,当屏幕拉伸则百分比显示更多信息。

以下标注为最小宽度,跟随屏幕拉伸自适应

每个单元格的内边距为「16px」

图片可以分为「图片」和「图片 + 标题」的展现形式

  • 当图片标题过长时,图片左对齐显示
  • 无图片时则由默认图片显示