为了使表格的一部分可滚动,我在表格内部使用了一个 div,但收到警告:
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>
我理解警告,但我希望表格的一部分(大部分)可以滚动,从而限制表格部分的最大高度:
<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,以使表格本身可滚动。
两个问题:
- 警告“那么糟糕”吗?我的意思是,我收到了警告,但它工作正常
- 您将如何创建标题(可以包含几列)和下方的可滚动表格?使用网格系统是唯一的选择吗?
最佳答案
我宁愿将整个表格包裹在一个带有溢出的 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%;
}
查看 CodeSandBox 示例:https://xyv5nl.csb.app/
关于css - reactjs 创建表格的一部分可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54510114/