Ant deisgn Table在tbody外包一层div

Question

我想要自定义antd Tabled的表格体，在tbody外包一层div

根据文档中的components属性,想覆盖掉body部分，但是没有效果

const renderBody = () => {
    return (
        <div id="bodyWraper">
            <tbody className="ant-table-tbody" style={{ backgroundColor: "green" }}>
                <tr key={'first'} className="ant-table-row">
                    <td key={'1_1'} className="ant-table-cell">111111111111111111</td>
                    <td key={'1_2'} className="ant-table-cell">111111111111111111</td>
                    <td key={'1_3'} className="ant-table-cell">111111111111111111</td>
                </tr>
                <tr key={'second'} className="ant-table-row">
                    <td key={'2_1'} className="ant-table-cell">111111111111111111</td>
                    <td key={'2_2'} className="ant-table-cell">111111111111111111</td>
                    <td key={'2_3'} className="ant-table-cell">111111111111111111</td>
                </tr>
            </tbody>
        </div>
    )
}

<Table
    {...allProps}
    components={{
        body:renderBody
    }}
/>

如果换成

<Table
    {...allProps}
    components={{
        body: {
           wrapper: renderBody
        }
    }}
/>

能够覆盖，但是tbody这个新的tbody总是挤在第一列，貌似与<colgroup>有关

请问有什么比较好的解决办法吗，还是只能全部使用原生Table重新写了？

Answer 1

注意：<table>标签的直接子元素不能是<div>

一个可选的 <caption> 元素
零个或多个的 <colgroup> 元素
一个可选的 <thead> 元素
下列任意一个:
零个或多个 <tbody> (en-US)
零个或多个 <tr>
一个可选的 <tfoot> 元素

参考文档

那么描述一下为什么需要在tbody外面加一层div，需要实现什么功能

====== 补充分割线 =======

大概想要一个表头固定，表身能够自动补充数据并进行滚动。
固定表头外加虚拟列表。至于自动滚动的话可以试试在虚拟列表上做手脚。我也没有试验过，提供一个思路仅供参考

Answer 2

你好 我遇到了同样的问题 想在tbody外面包一层 请问最后怎么处理的