antd design 3.20版本,固定最后一列后最后一列与其他表格内容没有对齐的解决办法,设置宽度无效
时间: 2024-03-02 19:49:11 浏览: 24
如果设置了宽度仍然无效的话,你可以尝试使用 `fixed` 属性设置最后一列的宽度。具体步骤如下:
1. 在 `<Table>` 组件上设置 `scroll={{ x: true }}` 属性,开启横向滚动条。
2. 在需要固定的列上添加 `fixed: 'right'` 属性,将其固定在右侧。
3. 在最后一列的 `columns` 属性中,设置 `fixed: 'right'` 和 `width` 属性。
例如:
```jsx
<Table
dataSource={dataSource}
columns={[
{
title: 'Name',
dataIndex: 'name',
width: 150,
},
{
title: 'Age',
dataIndex: 'age',
width: 150,
},
{
title: 'Address',
dataIndex: 'address',
width: 200,
},
{
title: 'Action',
dataIndex: '',
fixed: 'right',
width: 100,
render: () => <a>Delete</a>,
},
]}
scroll={{ x: true }}
/>
```
在以上代码中,最后一列的 `Action` 列使用了 `fixed: 'right'` 和 `width: 100` 属性,将其固定在右侧并设置宽度为 100px。
希望这个方法能够解决你的问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)