reactjs 如何修复Ant设计表版本3中的表头?

xuo3flqw  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(185)

在Ant Design版本3中,我使用了table组件,并且我尝试给予位置:sticky to head〉th。
但它不起作用。
这个特性已经在Ant版本4中实现了,但是要移植到这个版本还需要很长时间。
我有什么办法可以补救吗?
我试着给予位置:粘在头上。
这对解决问题没有帮助
应使表头粘滞

dl5txlt9

dl5txlt91#

您需要在position: sticky中添加thead元素,如果您想坚持到页面顶部,还需要添加top: 0
例如组件

import { Component } from 'react';
import { Table } from 'antd';
import styles from "./styles.module.scss";

export default class TableSticky extends Component {
  render() {
    return (
      <Table
        className={styles.table}
        columns={columns}
        dataSource={data}
        pagination={false}
      />
    )
  }
}

例如样式

.table {
  & thead {
    position: sticky;
    top: 0;
  }
}

相关问题