Javascript 固定了可滚动正文和标题的 Bootstrap 4 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54286705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 table with the scrollable body and header fixed
提问by ganesh
I am new to the front-end-development. Now, Here I have following table ,
我是新来的front-end-development。现在，我有下表，
<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>
Now, In this I have used the table-responsive class.
现在，在这里我使用了table-responsive class.
Now, I tried to make this table scrollable by using the
现在，我尝试使用
tbody { height: 400px; overflow-y: scroll }
But this is not working.
但这是行不通的。
One another thing about the content of the tdif it is large the other rows gets affected . So, How can I avoid this scenario ?
关于内容的另一件事是，td如果它很大，其他行就会受到影响。那么，我怎样才能避免这种情况呢？
Thanks for the help.
谢谢您的帮助。
[![enter image description here][3]][3]
[![在此处输入图像描述][3]][3]
回答by Balaji731
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;}
回答by Hai Pham
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
希望这会有所帮助
回答by Znaneswar
add display:blockto the table to fix this
添加display:block到表中以解决此问题
tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }
