fix title and footer height according to Table[size]

ant-design · Nov 15, 2016 · 9e6439b · 9e6439b
1 parent 92d77e4
commit 9e6439b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 17 deletions.
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
@@ -75,7 +75,7 @@ class Demo extends React.Component {
     title,
     footer,
     rowSelection: {},
-    scroll,
+    scroll: undefined,
   }
 
   handleToggle = (prop) => {
@@ -124,19 +124,19 @@ class Demo extends React.Component {
               <Switch checked={state.pagination} onChange={this.handleToggle('pagination')} />
             </FormItem>
             <FormItem label="Title">
-              <Switch defaultChecked onChange={this.handleTitleChange} />
+              <Switch checked={!!state.title} onChange={this.handleTitleChange} />
             </FormItem>
             <FormItem label="Footer">
-              <Switch defaultChecked onChange={this.handleFooterChange} />
+              <Switch checked={!!state.footer} onChange={this.handleFooterChange} />
             </FormItem>
             <FormItem label="Expandable">
-              <Switch defaultChecked onChange={this.handleExpandChange} />
+              <Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
             </FormItem>
-            <FormItem defaultChecked label="Checkbox">
-              <Switch onChange={this.handleRowSelectionChange} />
+            <FormItem label="Checkbox">
+              <Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
             </FormItem>
             <FormItem label="Fixed Header">
-              <Switch defaultChecked onChange={this.handleScollChange} />
+              <Switch checked={!!state.scroll} onChange={this.handleScollChange} />
             </FormItem>
             <FormItem label="Size">
               <Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>

diff --git a/components/table/demo/size.md b/components/table/demo/size.md
@@ -45,7 +45,7 @@ const data = [{
 
 ReactDOM.render(
   <div>
-    <h4>No. Form (Middle size table)</h4>
+    <h4>Middle size table</h4>
     <Table columns={columns} dataSource={data} size="middle" />
     <h4>Small size table</h4>
     <Table columns={columns} dataSource={data} size="small" />

diff --git a/components/table/style/index.less b/components/table/style/index.less
@@ -68,10 +68,17 @@
   &-footer {
     padding: 16px 8px;
     background: @table-head-background-color;
-    position: relative;
-    z-index: 2;
-    top: -1px;
     border-radius: 0 0 @border-radius-base @border-radius-base;
+    position: relative;
+    &:before {
+      content: '';
+      height: 1px;
+      background: @table-head-background-color;
+      position: absolute;
+      top: -1px;
+      width: 100%;
+      left: 0;
+    }
   }
 
   &.@{table-prefix-cls}-bordered &-footer {
@@ -157,6 +164,11 @@
     .@{table-prefix-cls}-tbody > tr > td {
       padding: 10px 8px;
     }
+
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer {
+      padding: 10px 8px;
+    }
   }
 
   &-small {
@@ -170,7 +182,6 @@
     }
 
     .@{table-prefix-cls}-thead > tr > th {
-      padding: 10px 8px;
       background: #fff;
       border-bottom: 1px solid @border-color-split;
     }
@@ -179,6 +190,17 @@
       padding: 6px 8px;
     }
 
+    .@{table-prefix-cls}-title,
+    .@{table-prefix-cls}-footer,
+    .@{table-prefix-cls}-thead > tr > th {
+      padding: 10px 8px;
+    }
+
+    .@{table-prefix-cls}-title {
+      border-bottom: 1px solid @border-color-split;
+      top: 0;
+    }
+
     .@{table-prefix-cls}-header {
       background: #fff;
       table {
@@ -192,11 +214,6 @@
     .@{table-prefix-cls}-row:last-child td {
       border-bottom: 0;
     }
-
-    .@{table-prefix-cls}-title,
-    .@{table-prefix-cls}-footer {
-      top: 0;
-    }
   }
 
   &-column-sorter {
@@ -279,11 +296,14 @@
     }
 
     &.@{table-prefix-cls}-small {
+      border-right: 0;
+
       .@{table-prefix-cls}-header > table,
       .@{table-prefix-cls}-body > table,
       .@{table-prefix-cls}-fixed-left table,
       .@{table-prefix-cls}-fixed-right table {
         border: 0;
+        padding: 0;
       }
 
       .@{table-prefix-cls}-title {

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -43,6 +43,9 @@
 .code-box:target {
   border: 1px solid rgba(45, 183, 245, 0.7);
   box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
+  z-index: 10;
+  background: #fff;
+  position: relative;
 }
 
 .code-box {