fix(table): resolve align bug when all columns do not have width (#247)

packages/semi-foundation/table/table.scss

@@ -492,6 +492,14 @@ $module: #{$prefix}-table;
                 align-items: center;
             }
         }
+
+        // when header is fixed, table should use `table-layout: fixed` to avoid align bug
+        &-header {
+
+            table {
+                table-layout: fixed;
+            }
+        }
     }
 
     &-scroll {

packages/semi-ui/table/_story/FixAllColumnsWithoutWidth.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Table, Tooltip, Tag } from '../../index';
+
+function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+        {
+            title: 'Description',
+            dataIndex: 'description',
+        },
+        {
+            dataIndex: 'x',
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+        },
+    ];
+
+    const data = [];
+
+    for (let i = 0; i < 8; i++) {
+        const age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+        const name = `Edward King ${i}`;
+        data.push({
+            key: `${i}`,
+            name,
+            age,
+            address: `London, Park Lane no. ${i}`,
+            address2: `London, Park Lane no. ${i}`,
+            description: `My name is ${name}`,
+        });
+    }
+
+    const scroll = { y: 300 };
+
+    return <Table bordered columns={columns} dataSource={data} scroll={scroll} pagination={false} />;
+}
+
+export default App;

packages/semi-ui/table/_story/table.stories.js

@@ -71,6 +71,7 @@ import FixRenderReturnProps from './FixRenderReturnProps';
 import ExpandAllRows from './ExpandAllRows';
 import ExpandAllGroupRows from './ExpandAllGroupRows';
 import ExpandRowByClick from './ExpandRowByClick';
+import FixAllColumnsWithoutWidth from './FixAllColumnsWithoutWidth';
 
 const stories = storiesOf('Table', module);
 // // stories.addDecorator(withKnobs);;
@@ -432,3 +433,4 @@ stories.add('expandAllRows', () => <ExpandAllRows/>);
 stories.add('expandAllGroupRows', () => <ExpandAllGroupRows/>);
 stories.add('expandRowByClick', () => <ExpandRowByClick/>);
 stories.add('rowSelection boolean', () => <Table columns={columns} dataSource={data} rowSelection/>);
+stories.add('fix all columns without width', () => <FixAllColumnsWithoutWidth />);

packages/semi-ui/table/_story/table.stories.tsx

@@ -8,6 +8,7 @@ import DefaultSortOrder from './DefaultSortOrder';
 import BetterScrollbar from './BetterScrollbar';
 import Empty from '../../empty';
 import Table from '../index';
+import FixAllColumnsWithoutWidth from './FixAllColumnsWithoutWidth';
 
 const stories = storiesOf('Table', module);
 
@@ -373,4 +374,6 @@ stories.add('empty', () => {
     );
 });
 
-stories.add('better scrollbar', () => <BetterScrollbar />);
+stories.add('better scrollbar', () => <BetterScrollbar />);
+
+stories.add('fix all columns without width', () => <FixAllColumnsWithoutWidth />);