@ -1,9 +1,9 @@
---
order: 10
title: 边框和页脚
title: 边框,页头和页脚
添加表格边框线和页脚。
添加表格边框线,页头和页脚。
````jsx
import { Table } from 'antd';
@ -40,8 +40,13 @@ const data = [{
address: '西湖区湖底公园1号',
}];
ReactDOM.render(<Table columns={columns} dataSource={data} bordered footer={() => '页脚'} />
, mountNode);
ReactDOM.render(<Table
columns={columns}
dataSource={data}
bordered
title={() => '页头'}
footer={() => '页脚'}
/>, mountNode);
````
````css
@ -72,6 +72,7 @@ const columns = [{
| bordered | 是否展示外边框和列边框 | Boolean | false |
| showHeader | 是否显示表头 | Boolean | true |
| footer | 表格底部自定义渲染函数 | Function(currentPageData) | |
| title | 表格头部自定义渲染函数 | Function(currentPageData) | |
| scroll | 横向或纵向支持滚动,也可用于指定滚动区域的宽高度:`{{ x: true, y: 300 }}` | Object | - |
### Column
@ -75,6 +75,26 @@
border: 1px solid @border-color-split;
}
&-title {
padding: 16px 8px;
position: relative;
top: 1px;
border-radius: @border-radius-base @border-radius-base 0 0;
&.@{table-prefix-cls}-bordered &-title {
&-title + &-content {
table {
border-top-left-radius: 0;
border-top-right-radius: 0;
tr.@{table-prefix-cls}-row-selected {
background: #fafafa;
@ -60,7 +60,7 @@
"rc-slider": "~3.7.3",
"rc-steps": "~2.1.5",
"rc-switch": "~1.4.2",
"rc-table": "~4.3.5",
"rc-table": "~4.4.0",
"rc-tabs": "~5.9.2",
"rc-time-picker": "~1.1.5",
"rc-tooltip": "~3.4.1",