<div className="table-responsive">
<table className="table table-hover" id="job-table">
<thead>
<tr className="text-center">
<th scope="col">Sr.No.</th>
<th scope="col">Company Name</th>
<th scope="col">Technology</th>
<th scope="col">Total Resumes</th>
<th scope="col">Job Title</th>
<th scope="col">Total Score</th>
<th scope="col">Average Score</th>
</tr>
</thead>
<tbody className="text-center">
{this.props.list && this.props.list.content && this.props.list.content.length > 0 && this.props.list.content.map((item, key) => {
return (
<tr key={key}>
<td className="font-weight-bold">1</td>
<td className="font-weight-bold">ABCDED</td>
<td>Software Developer</td>
<td className="font-weight-bold">17</td>
<td>5 years experience</td>
<td className="font-weight-bold">30</td>
<td className="font-weight-bold">30</td>
</tr>
)
})}
</tbody>
</table>
</div>
在此我使用了table-responsive class
。我试图通过使用以下方法使该表可滚动:
tbody { height: 400px; overflow-y: scroll }
但这行不通。
关于 td
内容的另一件事,如果它很大,其他行也会受到影响。我怎样才能避免这种情况?
最佳答案
可以使用position: sticky
设置固定标题。
检查 sample code .
这里设置主容器的高度。
.table-responsive{height:400px;overflow:scroll;}
设置sticky到第tr->th.
thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}
关于javascript - Bootstrap 4 表格,可滚动主体和标题固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54286705/