antd table 固定表头
时间: 2023-10-06 13:13:49 浏览: 97
要在 Ant Design 的 Table 组件中固定表头,可以使用 `scroll` 属性来实现。具体步骤如下:
1. 设置表格的 `scroll` 属性,包括设置 `x` 和 `y` 的值,以及 `scrollToFirstRowOnChange` 属性。
```jsx
<Table
dataSource={dataSource}
columns={columns}
scroll={{ x: 'max-content', y: 300, scrollToFirstRowOnChange: true }}
/>
```
2. 在表格的 `columns` 属性中,为每一列设置 `fixed` 属性,可以选择 `left`、`right` 或 `true`。`true` 表示该列不会随着滚动而移动。
```jsx
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 150,
fixed: 'left',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 150,
},
// ...
];
```
以上就是固定表头的实现方法。需要注意的是,当表格的宽度超过 `scroll.x` 指定的宽度时,表格会出现横向滚动条。为了避免表头和表格内容错位,可以将 `x` 的值设置为 `'max-content'`。同时,为了保证滚动时第一行的数据不被表头遮挡,需要将 `scrollToFirstRowOnChange` 属性设置为 `true`。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)