From 4a08e0188d77677943c304ebe0cb0247f1eeb24a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 2 Jun 2016 17:35:25 +0800
Subject: [PATCH] Fix some wrap misplace issues in fixed table (#1829)

---
 components/table/demo/fixed-columns-header.md | 22 +++++++++-------
 components/table/demo/fixed-columns.md        | 26 +++++++++++--------
 components/table/style/index.less             | 13 ++++++++++
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md
index 25b4d58ef0..87250e95c9 100644
--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@@ -5,7 +5,9 @@ title: 固定头和列
 
 适合同时展示有大量数据和数据列。
 
-> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题。
+> 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。
+
+> 若列头与内容不对齐，请指定每列宽度 `width`。
 
 ````jsx
 import { Table } from 'antd';
@@ -13,14 +15,14 @@ import { Table } from 'antd';
 const columns = [
   { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
   { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
-  { title: '列1', dataIndex: 'age', key: '1' },
-  { title: '列2', dataIndex: 'age', key: '2' },
-  { title: '列3', dataIndex: 'age', key: '3' },
-  { title: '列4', dataIndex: 'age', key: '4' },
-  { title: '列5', dataIndex: 'age', key: '5' },
-  { title: '列6', dataIndex: 'age', key: '6' },
-  { title: '列7', dataIndex: 'age', key: '7' },
-  { title: '列8', dataIndex: 'age', key: '8' },
+  { title: '列1', dataIndex: 'address', key: '1', width: 150 },
+  { title: '列2', dataIndex: 'address', key: '2', width: 150 },
+  { title: '列3', dataIndex: 'address', key: '3', width: 150 },
+  { title: '列4', dataIndex: 'address', key: '4', width: 150 },
+  { title: '列5', dataIndex: 'address', key: '5', width: 150 },
+  { title: '列6', dataIndex: 'address', key: '6', width: 150 },
+  { title: '列7', dataIndex: 'address', key: '7', width: 150 },
+  { title: '列8', dataIndex: 'address', key: '8', width: 150 },
   {
     title: '操作',
     key: 'operation',
@@ -41,7 +43,7 @@ for (let i = 0; i < 100; i++) {
 }
 
 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);
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
index cb7640b1ba..8da44d1beb 100644
--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@@ -5,7 +5,9 @@ title: 固定列
 
 对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
 
-> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题。
+> 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。
+
+> 若列头与内容不对齐，请指定每列宽度 `width`。
 
 ````jsx
 import { Table } from 'antd';
@@ -13,14 +15,14 @@ import { Table } from 'antd';
 const columns = [
   { title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
   { title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
-  { title: '列1', dataIndex: 'age', key: '1' },
-  { title: '列2', dataIndex: 'age', key: '2' },
-  { title: '列3', dataIndex: 'age', key: '3' },
-  { title: '列4', dataIndex: 'age', key: '4' },
-  { title: '列5', dataIndex: 'age', key: '5' },
-  { title: '列6', dataIndex: 'age', key: '6' },
-  { title: '列7', dataIndex: 'age', key: '7' },
-  { title: '列8', dataIndex: 'age', key: '8' },
+  { title: '列1', dataIndex: 'address', key: '1' },
+  { title: '列2', dataIndex: 'address', key: '2' },
+  { title: '列3', dataIndex: 'address', key: '3' },
+  { title: '列4', dataIndex: 'address', key: '4' },
+  { title: '列5', dataIndex: 'address', key: '5' },
+  { title: '列6', dataIndex: 'address', key: '6' },
+  { title: '列7', dataIndex: 'address', key: '7' },
+  { title: '列8', dataIndex: 'address', key: '8' },
   {
     title: '操作',
     key: 'operation',
@@ -34,14 +36,16 @@ const data = [{
   key: '1',
   name: '胡彦斌',
   age: 32,
+  address: '西湖区湖底公园0号',
 }, {
   key: '2',
   name: '胡彦祖',
-  age: 42,
+  age: 40,
+  address: '西湖区湖底公园1号',
 }];
 
 function App() {
-  return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />;
+  return <Table columns={columns} dataSource={data} scroll={{ x: true }} />;
 }
 
 ReactDOM.render(<App />, mountNode);
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 529070566f..16c041e24d 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -370,6 +370,10 @@
 
   &-scroll {
     overflow: auto;
+    table {
+      width: auto;
+      min-width: 100%;
+    }
   }
 
   &-body-inner {
@@ -395,6 +399,15 @@
     }
   }
 
+  &-fixed-left,
+  &-fixed-right,
+  &-scroll {
+    th,
+    td {
+      white-space: nowrap;
+    }
+  }
+
   &-fixed-left &-fixed,
   &-fixed-right &-fixed {
     border-radius: 0;