reactjs创建部分可滚动的表格

Posted 2023-03-06

【中文标题】reactjs创建部分可滚动的表格

【英文标题】：reactjs creating part of the table scrollable

【发布时间】：2019-06-27 20:06:29

【问题描述】：

为了使表格的一部分可滚动，我在表格内使用了一个 div，但收到了警告：

警告：validateDOMNesting(...)：

不能作为 的子项出现

我理解警告，但我希望表格的一部分（大部分）可以滚动，从而限制表格部分的最大高度：

<div className="main-table">
               <table className="main-edit-table" align="right">
                     <tbody>
                            <tr>
                                 <th>haveri</th>
                             </tr>
                              <div className="inst-container">
                              this.state.list && this.state.list.map((collection, key) => (
                                    <tr key=key>
                                        <td>key+1</td>
                                        <td>
                                            <div className="main-item-container">
                                                <span>collection</span>
                                            </div>
                                        </td>
                                        <td>collection.subjects[0] && collection.subjects[0].name</td>
                                    </tr>      
                                    ))
                                    </div>
                            </tbody>
                        </table>

                    </div>

CSS：

.inst-container 
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;

我所做的只是在表格的标题之后插入一个 div，以使表格本身可滚动。

两个问题：

警告“那么糟糕”吗？我的意思是，我收到了警告，但它工作正常 如何创建标题（可以包含几列）和下方的可滚动表格？使用网格系统是唯一的选择吗？

【问题讨论】：

【参考方案1】：

我宁愿将整个表格包装在一个带有溢出的 div 容器中，并将列标题设置为粘性位置。

见下文：

<div className="container">
    <table className="main-edit-table" align="right">
        <thead>
            <tr>
                <th className="sticky-column">haveri</th>
            </tr>
        </thead>
        <tbody>
                this.state.list && this.state.list.map((collection, key) => (
                    <tr key=key>
                        <td>key+1</td>
                         <td>
                             <div className="main-item-container">
                                 <span>collection</span>
                             </div>
                             </td>
                             <td>collection.subjects[0] && 
                             collection.subjects[0].name</td>
                    </tr>      
                                ))
        </tbody>
    </table>
</div>

CSS：

.sticky-column 
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0


.container 
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;

【讨论】：

谢谢 Mazhar H 你测试过吗？结果不好，因为滚动时，标题合并到可滚动表中，它不在它上面

哦，非常感谢！我想我犯了一个错误，导致它不像你的例子那样运作。去看看，谢谢