--- order: 15 version: 4.18.0 title: en-US: colSpan and rowSpan zh-CN: 表格行/列合并 --- ## zh-CN 表头只支持列合并,使用 column 里的 colSpan 进行设置。 表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。 ## en-US Table column title supports `colSpan` that set in `column`. Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered. ```jsx import { Table } from 'antd'; // In the fifth row, other columns are merged into first column // by setting it's colSpan to be 0 const sharedOnCell = (_, index) => { if (index === 4) { return { colSpan: 0 }; } }; const columns = [ { title: 'Name', dataIndex: 'name', render: (text, row, index) => {text}, onCell: (_, index) => ({ colSpan: index < 4 ? 1 : 5, }), }, { title: 'Age', dataIndex: 'age', onCell: sharedOnCell, }, { title: 'Home phone', colSpan: 2, dataIndex: 'tel', onCell: (_, index) => { if (index === 2) { return { rowSpan: 2 }; } // These two are merged into above cell if (index === 3) { return { rowSpan: 0 }; } if (index === 4) { return { colSpan: 0 }; } }, }, { title: 'Phone', colSpan: 0, dataIndex: 'phone', onCell: sharedOnCell, }, { title: 'Address', dataIndex: 'address', onCell: sharedOnCell, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park', }, { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park', }, ]; ReactDOM.render(