### 何时使用

需展示的信息内容较多，为方便用户浏览和获取批量数据时；

需要对数据进行排序、搜索、筛选、分页等操作时；

需要对数据进行归纳、分类，便于用户快速了解其中的差异与变化、关联和区别时。

### 组件搭配使用

##### 与筛选搭配使用，按一定的数据维度进行筛选。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/table-1.png" />
  </div>

  <div class="item"></div>
</div>

<hr />

##### 与文字提示搭配使用，鼠标 hover 时呈现说明内容。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/table-2.png" />
  </div>

  <div class="item"></div>
</div>

### 组件常见用法

##### 当单元格显示数据较多时，可最多显示 3 行，无法显示的内容隐藏，当鼠标 hover 时显示隐藏内容。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E8%A1%A8%E6%A0%BC------------3@2x.png"/>
    <em>图示：单行截断</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E8%A1%A8%E6%A0%BC---------4@2x.png"/>
    <em>图示：3行限制截断</em>
  </div>
</div>

<hr />

##### 操作列中，空间不足情况下可展示 2 个高频操作，其余做隐藏处理。也可以选用图标按钮样式，节省一定空间。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E8%A1%A8%E6%A0%BC----------5@2x.png"/>
    <em>图示：隐藏部分操作</em>
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/table-6.png"/>
    <em>图示：图标操作</em>
  </div>
</div>
