Fix small table style (#3761)

* Tweak small table style, fix #3743

* Add checkbox switch to dynamic settings demo

* Add fixed header to dynamic settings demo

components/table/demo/dynamic-settings.md

@@ -21,11 +21,13 @@ const columns = [{
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
+  width: 150,
   render: text => <a href="#">{text}</a>,
 }, {
   title: 'Age',
   dataIndex: 'age',
   key: 'age',
+  width: 100,
 }, {
   title: 'Address',
   dataIndex: 'address',
@@ -33,6 +35,7 @@ const columns = [{
 }, {
   title: 'Action',
   key: 'action',
+  width: 400,
   render: (text, record) => (
     <span>
       <a href="#">Action 一 {record.name}</a>
@@ -46,29 +49,21 @@ const columns = [{
   ),
 }];
 
-const data = [{
-  key: '1',
-  name: 'John Brown',
-  age: 32,
-  address: 'New York No. 1 Lake Park',
-  description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
-}, {
-  key: '2',
-  name: 'Jim Green',
-  age: 42,
-  address: 'London No. 1 Lake Park',
-  description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
-}, {
-  key: '3',
-  name: 'Joe Black',
-  age: 32,
-  address: 'Sidney No. 1 Lake Park',
-  description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
-}];
+const data = [];
+for (let i = 1; i <= 10; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: `${i}2`,
+    address: `New York No. ${i} Lake Park`,
+    description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
+  });
+}
 
 const expandedRowRender = record => <p>{record.description}</p>;
 const title = () => 'Here is title';
 const footer = () => 'Here is footer';
+const scroll = { y: 240 };
 
 class Demo extends React.Component {
   state = {
@@ -79,6 +74,8 @@ class Demo extends React.Component {
     expandedRowRender,
     title,
     footer,
+    rowSelection: {},
+    scroll,
   }
 
   handleToggle = (prop) => {
@@ -103,6 +100,14 @@ class Demo extends React.Component {
     this.setState({ footer: enable ? footer : undefined });
   }
 
+  handleRowSelectionChange = (enable) => {
+    this.setState({ rowSelection: enable ? {} : undefined });
+  }
+
+  handleScollChange = (enable) => {
+    this.setState({ scroll: enable ? scroll : undefined });
+  }
+
   render() {
     const state = this.state;
     return (
@@ -127,6 +132,12 @@ class Demo extends React.Component {
             <FormItem label="Expandable">
               <Switch defaultChecked onChange={this.handleExpandChange} />
             </FormItem>
+            <FormItem defaultChecked label="Checkbox">
+              <Switch onChange={this.handleRowSelectionChange} />
+            </FormItem>
+            <FormItem label="Fixed Header">
+              <Switch defaultChecked onChange={this.handleScollChange} />
+            </FormItem>
             <FormItem label="Size">
               <Radio.Group value={state.size} onChange={this.handleSizeChange}>
                 <Radio.Button value="default">Default</Radio.Button>

components/table/style/index.less

@@ -165,10 +165,6 @@
       padding: 0 8px;
     }
 
-    &.@{table-prefix-cls}-bordered .@{table-prefix-cls}-body > table {
-      border: 0;
-    }
-
     .@{table-prefix-cls}-thead > tr > th {
       padding: 10px 8px;
       background: #fff;
@@ -192,6 +188,11 @@
     .@{table-prefix-cls}-row:last-child td {
       border-bottom: 0;
     }
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer {
+      top: 0;
+    }
   }
 
   &-column-sorter {
@@ -283,6 +284,25 @@
         border-right: 0;
       }
     }
+
+    &.@{table-prefix-cls}-small {
+      .@{table-prefix-cls}-header > table,
+      .@{table-prefix-cls}-body > table,
+      .@{table-prefix-cls}-fixed-left table,
+      .@{table-prefix-cls}-fixed-right table {
+        border: 0;
+      }
+
+      .@{table-prefix-cls}-title {
+        border: 0;
+        border-bottom: 1px solid @border-color-split;
+      }
+
+      .@{table-prefix-cls}-footer {
+        border: 0;
+        border-top: 1px solid @border-color-split;
+      }
+    }
   }
 
   &-placeholder {