Antd:实现表格第一行固定

应用：将表格第一行固定，滚动浏览第一行下面的部分

首先：说一说关于antd表格滚动条

样式一：当数据超出了页面显示范围，在.ant-table-container上添加

.ant-table-container {
  overflow: scroll;
}

实现数据超出container盒子后滚动

缺点1：滚动时表格header会一起滚动

缺点2：当数据量少的时候依旧会留有滚动条位置，效果如下：

样式二：通过参考antd表格文档，其中有一个scroll属性，可以控制表格的滚动，注意：scroll属性传一个对象。 antd表格scroll属性

<Table columns={columns} dataSource={data} scroll={{y: '100%'}} pagination={false}/>

实现效果：

此时滚动范围就变成了从表格内容开始滚动，表头固定。

---

切回正题，说一说固定第一行数据的实现思路。

首先，通过rowClassName属性给第一行添加一个类名firstRow

<Table columns={columns} dataSource={data} scroll={{y: '100%'}} rowClassName={(record) => !record.key?'firstRow':''} pagination={false}/>

调整firstRow样式，通过position:sticky，将第一行固定

.firstRow {
  background: #B8D8FF;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

实现效果：