mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Fix some wrap misplace issues in fixed table (#1829)

Browse Source
This commit is contained in:
afc163 2016-06-02 17:35:25 +08:00
parent b15a4e3165
commit 4a08e0188d
3 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/table/demo/fixed-columns-header.md
View File

@ -5,7 +5,9 @@ title: 固定头和列
适合同时展示有大量数据和数据列。 适合同时展示有大量数据和数据列。
> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题。 > 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。
> 若列头与内容不对齐，请指定每列宽度 `width`。
````jsx ````jsx
import { Table } from 'antd'; import { Table } from 'antd';
@ -13,14 +15,14 @@ import { Table } from 'antd';
const columns = [ const columns = [
{ title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: '列1', dataIndex: 'age', key: '1' }, { title: '列1', dataIndex: 'address', key: '1', width: 150 },
{ title: '列2', dataIndex: 'age', key: '2' }, { title: '列2', dataIndex: 'address', key: '2', width: 150 },
{ title: '列3', dataIndex: 'age', key: '3' }, { title: '列3', dataIndex: 'address', key: '3', width: 150 },
{ title: '列4', dataIndex: 'age', key: '4' }, { title: '列4', dataIndex: 'address', key: '4', width: 150 },
{ title: '列5', dataIndex: 'age', key: '5' }, { title: '列5', dataIndex: 'address', key: '5', width: 150 },
{ title: '列6', dataIndex: 'age', key: '6' }, { title: '列6', dataIndex: 'address', key: '6', width: 150 },
{ title: '列7', dataIndex: 'age', key: '7' }, { title: '列7', dataIndex: 'address', key: '7', width: 150 },
{ title: '列8', dataIndex: 'age', key: '8' }, { title: '列8', dataIndex: 'address', key: '8', width: 150 },
{ {
title: '操作', title: '操作',
key: 'operation', key: 'operation',
@ -41,7 +43,7 @@ for (let i = 0; i < 100; i++) {
} }
function App() { function App() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000, y: 300 }} />; return <Table columns={columns} dataSource={data} scroll={{ x: true, y: 300 }} />;
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);

26
components/table/demo/fixed-columns.md
View File

@ -5,7 +5,9 @@ title: 固定列
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题。 > 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。
> 若列头与内容不对齐，请指定每列宽度 `width`。
````jsx ````jsx
import { Table } from 'antd'; import { Table } from 'antd';
@ -13,14 +15,14 @@ import { Table } from 'antd';
const columns = [ const columns = [
{ title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: '列1', dataIndex: 'age', key: '1' }, { title: '列1', dataIndex: 'address', key: '1' },
{ title: '列2', dataIndex: 'age', key: '2' }, { title: '列2', dataIndex: 'address', key: '2' },
{ title: '列3', dataIndex: 'age', key: '3' }, { title: '列3', dataIndex: 'address', key: '3' },
{ title: '列4', dataIndex: 'age', key: '4' }, { title: '列4', dataIndex: 'address', key: '4' },
{ title: '列5', dataIndex: 'age', key: '5' }, { title: '列5', dataIndex: 'address', key: '5' },
{ title: '列6', dataIndex: 'age', key: '6' }, { title: '列6', dataIndex: 'address', key: '6' },
{ title: '列7', dataIndex: 'age', key: '7' }, { title: '列7', dataIndex: 'address', key: '7' },
{ title: '列8', dataIndex: 'age', key: '8' }, { title: '列8', dataIndex: 'address', key: '8' },
{ {
title: '操作', title: '操作',
key: 'operation', key: 'operation',
@ -34,14 +36,16 @@ const data = [{
key: '1', key: '1',
name: '胡彦斌', name: '胡彦斌',
age: 32, age: 32,
address: '西湖区湖底公园0号',
}, { }, {
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 40,
address: '西湖区湖底公园1号',
}]; }];
function App() { function App() {
return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />; return <Table columns={columns} dataSource={data} scroll={{ x: true }} />;
} }
ReactDOM.render(<App />, mountNode); ReactDOM.render(<App />, mountNode);

13
components/table/style/index.less
View File

@ -370,6 +370,10 @@
&-scroll { &-scroll {
overflow: auto; overflow: auto;
table {
width: auto;
min-width: 100%;
}
} }
&-body-inner { &-body-inner {
@ -395,6 +399,15 @@
} }
} }
&-fixed-left,
&-fixed-right,
&-scroll {
th,
td {
white-space: nowrap;
}
}
&-fixed-left &-fixed, &-fixed-left &-fixed,
&-fixed-right &-fixed { &-fixed-right &-fixed {
border-radius: 0; border-radius: 0;