mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
---
|
||
order: 19
|
||
title:
|
||
en-US: Fixed Columns
|
||
zh-CN: 固定列
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
|
||
|
||
> 若列头与内容不对齐或出现列重复，请指定**固定列**的宽度 `width`。如果指定 `width` 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有[超长连续字段破坏布局](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)。
|
||
>
|
||
> 建议指定 `scroll.x` 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 `scroll.x`。
|
||
|
||
**注意：v4 版本固定列通过 sticky 实现，IE 11 会降级成横向滚动。**
|
||
|
||
## en-US
|
||
|
||
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.
|
||
|
||
> Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
|
||
>
|
||
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
|
||
|
||
**Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.**
|
||
|
||
```jsx
|
||
import { Table } from 'antd';
|
||
|
||
const columns = [
|
||
{
|
||
title: 'Full Name',
|
||
width: 100,
|
||
dataIndex: 'name',
|
||
key: 'name',
|
||
fixed: 'left',
|
||
},
|
||
{
|
||
title: 'Age',
|
||
width: 100,
|
||
dataIndex: 'age',
|
||
key: 'age',
|
||
fixed: 'left',
|
||
},
|
||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||
{ title: 'Column 4', dataIndex: 'address', key: '4' },
|
||
{ title: 'Column 5', dataIndex: 'address', key: '5' },
|
||
{ title: 'Column 6', dataIndex: 'address', key: '6' },
|
||
{ title: 'Column 7', dataIndex: 'address', key: '7' },
|
||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||
{
|
||
title: 'Action',
|
||
key: 'operation',
|
||
fixed: 'right',
|
||
width: 100,
|
||
render: () => <a>action</a>,
|
||
},
|
||
];
|
||
|
||
const data = [
|
||
{
|
||
key: '1',
|
||
name: 'John Brown',
|
||
age: 32,
|
||
address: 'New York Park',
|
||
},
|
||
{
|
||
key: '2',
|
||
name: 'Jim Green',
|
||
age: 40,
|
||
address: 'London Park',
|
||
},
|
||
];
|
||
|
||
export default () => <Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />;
|
||
```
|