[英]Bootstrap 4 table with the scrollable body and header fixed
I am new to front-end-development.我是前端开发的新手。 Here I have the following table:这里我有下表:
<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>
In this I have used the table-responsive class
.在此我使用了table-responsive class
。 I have tried to make this table scrollable by using this:我尝试使用以下方法使该表可滚动:
tbody { height: 400px; overflow-y: scroll }
But this is not working.但这是行不通的。
One other thing about the content of the td
, if it is large the other rows gets affected.关于td
内容的另一件事,如果它很大,其他行会受到影响。 How can I avoid this scenario?我怎样才能避免这种情况?
[![enter image description here][3]][3] [![在此处输入图像描述][3]][3]
Can set fixed header by using position: sticky
.可以使用position: sticky
设置固定标题。
Check the sample code .检查示例代码。
Here set the height to the main container.这里将高度设置为主容器。
.table-responsive{height:400px;overflow:scroll;}
Set the postion sticky to the tr-> th.将位置粘性设置为 tr-> th。
thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}
Try using flex, it should be compatible with table-responsive
:尝试使用 flex,它应该与table-responsive
兼容:
table {
display: flex;
flex-flow: column;
width: 100%;
}
thead {
flex: 0 0 auto;
}
tbody {
flex: 1 1 auto;
display: block;
overflow-y: auto;
overflow-x: hidden;
}
tr {
width: 100%;
display: table;
table-layout: fixed;
}
Hope this will help希望这会有所帮助
add display:block
to the table to fix this将display:block
添加到表格中以解决此问题
tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }
use position : sticky at and top : 0使用位置:粘性在和顶部:0
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
full example can be found here: https://css-tricks.com/position-sticky-and-table-headers/完整示例可以在这里找到: https : //css-tricks.com/position-sticky-and-table-headers/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.