diff --git a/components/table/demo/small.md b/components/table/demo/size.md
similarity index 59%
rename from components/table/demo/small.md
rename to components/table/demo/size.md
index b89cb6b022..847358f870 100644
--- a/components/table/demo/small.md
+++ b/components/table/demo/size.md
@@ -1,8 +1,8 @@
-# 小型列表
+# 中小型列表
- order: 9
-`size="small"`, 用在对话框等空间较小的地方。
+紧凑型的列表, 中型列表用于需要数据紧凑展示的情况,小型列表只用于对话框内。
---
@@ -36,6 +36,8 @@ const data = [{
address: '西湖区湖底公园1号'
}];
-ReactDOM.render(
-, document.getElementById('components-table-demo-small'));
+ReactDOM.render(, document.getElementById('components-table-demo-size'));
````
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 2eecc3fe78..4b0da03309 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -8,6 +8,7 @@ import Pagination from '../pagination';
import Icon from '../icon';
import objectAssign from 'object-assign';
import Spin from '../spin';
+import classNames from 'classnames';
function noop() {
}
@@ -72,7 +73,7 @@ let AntTable = React.createClass({
useFixedHeader: false,
rowSelection: null,
className: '',
- size: 'default',
+ size: 'large',
loading: false,
bordered: false,
onChange: noop,
@@ -461,10 +462,10 @@ let AntTable = React.createClass({
if (!this.hasPagination()) {
return null;
}
- let classString = 'ant-table-pagination';
- if (this.props.size === 'small') {
- classString += ' mini';
- }
+ let classString = classNames({
+ 'ant-table-pagination': true,
+ 'mini': this.props.size === 'middle' || this.props.size === 'small',
+ });
let total = this.state.pagination.total;
if (!total && this.isLocalDataSource()) {
total = this.getLocalData().length;
@@ -613,14 +614,14 @@ let AntTable = React.createClass({
render() {
let data = this.getCurrentPageData();
let columns = this.renderRowSelection();
- let classString = this.props.className;
let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
- if (this.props.size === 'small') {
- classString += ' ant-table-small';
- }
- if (this.props.bordered) {
- classString += ' ant-table-bordered';
- }
+
+ let classString = classNames({
+ [`ant-table-${this.props.size}`]: true,
+ 'ant-table-bordered': this.props.bordered,
+ [this.props.className]: !!this.props.className,
+ });
+
columns = this.renderColumnsDropdown(columns);
columns = columns.map((column, i) => {
column.key = column.dataIndex || i;
diff --git a/style/components/table.less b/style/components/table.less
index 2b70639615..e17edd5c1e 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -98,6 +98,12 @@
}
}
+ &-middle {
+ th, td {
+ padding: 10px 8px;
+ }
+ }
+
&-small {
table {
border: 1px solid #e9e9e9;