Javascript Bootstrap 4表,固定了可滚动的主体和标题
我是前端开发新手。我这里有下表:Javascript Bootstrap 4表,固定了可滚动的主体和标题,javascript,html,css,reactjs,bootstrap-4,Javascript,Html,Css,Reactjs,Bootstrap 4,我是前端开发新手。我这里有下表: <div className="table-responsive"> <table className="table table-hover" id="job-table"> <thead> <tr className="text-center"> <th scope=&
<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>
但这是行不通的
关于td
内容的另一件事是,如果它很大,其他行就会受到影响。我如何避免这种情况
[![enter image description here][3][3]将
display:block
添加到表中以修复此问题
tbody{height: 400px; overflow-y: scroll;display:block;}
th { position: sticky; top: 0; }
可以使用
位置:sticky
设置固定表头
检查一下
此处设置主容器的高度
.table-responsive{height:400px;overflow:scroll;}
将粘贴位置设置为tr->th
thead tr:nth-child(1) th{background: white; position: sticky;top: 0;z-index: 10;}
尝试使用flex,它应该与
表响应兼容
:
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;
}
希望这将有助于使用position:sticky at
排名:0
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
完整示例可在此处找到:
嘿,这已经奏效了,但问题是我的一个表数据有一个很大的内容,你可以说它超过了100个字符,因此,特定行的高度变大了。那我怎么能this@ganesh嗨,我的解决方案有什么问题吗?不,你的解决方案没有问题。它唯一的优点是,如果其中一行有一个td,它的内容很大,那么这一行的高度就变得很大。我的意思是这就像一个单词wrap@ganesh那么你期望什么呢,只要给我更多的细节以获得更多的帮助。不,实际上我是新来的,所以我不知道哪条路是正确的。所以,你可以给我一些指导。因为我得到的第一个解决方案也适用于宽度问题,就像其他行的宽度发生变化一样。这很好,唯一的问题是,如果其中一行有一个具有大内容的td,那么其他行的宽度也会变化。只有在每个th和相应的td上指定了宽度时,这才有效。例如,类似这样的内容(对每列重复并更改列目标#):
th:nth child(1),td:nth child(1){width:50px;}
。这不是一个好的解决方案,它在bootstrap 4上工作得很好,在一个模态框中有一个表格,用chrome查看。如果您对每列中的所有内容都居中表示满意,链接的示例解决方案就可以工作。您在这里展示的解决方案没有提到,并且如果不向thead tr元素添加以文本为中心的类,它将完全中断。@Drew我不理解为什么没有以文本为中心的类它会中断。我刚刚测试过,它在@Balaji731上运行得非常好。这个解决方案可能是这里最好的,因为它不会改变列的宽度。唯一的缺点是,th
的边框没有保留,并且随着主体向上滚动(我们可以在示例代码链接中看到),您是最好的!最好的解决方案,谢谢你!此代码笔比此处发布的答案更接近于解决问题:
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}