table表格 如何加卡片 实现？

 const columnsinsu = [
        {
            dataIndex: 'nowdate',
            key: 'nowdate',
            render: (text, record) =>
                <Card
                    hoverable
                    style={{
                        width: '97%',
                        height: 90,
                    }}
                // cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                >
                    <div style={{ 'display': 'flex' }}>
                        <div style={{ 'borderRight': '1px solid lightgray', 'textAlign': 'center', 'width': '12%' }}>
                            <h3><BarChartOutlined style={{ 'color': '#409EFF' }} />{text}</h3>
                        </div>
                        <div>
                            <div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>公司社保金额<h3>{record.gr_social}</h3></div>
                        </div>
                        <div>
                            <div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>个人社保金额<h3>{record.gr_social}</h3></div>
                        </div>
                        <div>
                            <div style={{ 'textAlign': 'center', 'borderRight': '1px solid lightgray', 'marginLeft': '30px', 'width': '100%' }}>参保人数<h3>{record.staff_num}</h3></div>
                        </div>
                        <div>
                            <div onClick={() => { insurRow(record) }} style={{ 'textAlign': 'right', 'marginLeft': '330px' }}>查看凭证</div>
                        </div>
                    </div>
                </Card>
        },