gpt4 book ai didi

css - 滚动时固定表头

转载 作者:行者123 更新时间:2023-11-28 08:50:23 29 4
gpt4 key购买 nike

我正在使用 Bootstrap V4 alpha 6Angular 5 来创建滚动时具有固定标题的表格。但是,我似乎无法让它工作。

注意:navbarfixed-top

我尝试过的事情:

1) 添加fixed-top类到thead

2)

thead {
position: sticky;
top: 0;
}

3)

thead {
display:block;
}

4) 很多 CSS 但没有任何效果,因为表格是响应式的和可滚动的,并且有多个标题行。

我做错了什么?

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" width="200" height="40" class="d-inline-block align-top" alt="">
</a>
</nav>
<table class="table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed">
<thead class="sticky-top">
<tr>
<th colspan="16" class="text-center">PROJECT 1</th>
</tr>
<tr>
<th rowspan="2">WON</th>
<th rowspan="2">LST #</th>
<th rowspan="2">FLR #</th>
<th colspan="3">GLS</th>
<th colspan="7">FRMS</th>
<th rowspan="2">Scheduled Date</th>
<th rowspan="2">Cmplt Date</th>
</tr>
<tr>
<th>G Reqd</th>
<th colspan="2">G Rcvd (%)</th>
<th>Frms Reqd</th>
<th colspan="2">Frms Ass (%)</th>
<th colspan="2">Frms Line (%)</th>
<th colspan="2">Frms Cmplt (%)</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let project of projectData">
<td>{{project.ordernumber}}</td>
<td>{{project.ListNumber}}</td>
<td>{{project.floorID}}</td>
<td>{{project.glassRequired}}</td>
<td>{{project.glassReceived}}</td>
<td>{{project.glassReceivedPercent}}</td>
<td>{{project.framesRequired}}</td>
<td>{{project.framesAssembled}}</td>
<td>{{project.framesAssembledPercent}}%</td>
<td>{{project.framesGlazed}}</td>
<td>{{project.framesGlazedPercent}}%</td>
<td>{{project.framesShipped}}</td>
<td>{{project.framesShippedPercent}}%</td>
<td>{{project.deliverydate}}</td>
<td>Not Shipped Yet</td>
</tr>
</tbody>
</table>

我还创建了一个 plnkr .

最佳答案

实现此目的的最简单方法是创建您自己的 JavaScript 函数来根据需要操纵行为。试用以下代码片段以满足您的期望。

document.onscroll = function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("thead").css({
"position": "fixed",
"top": "0px"
});
$("th").css({"padding":"15px 66px", "margin":"auto"});
} else {
$("thead").css({
"position": "relative",
"top": "0px"
});
}
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-borderless table-hover">
<thead class="thead-dark">
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
</tbody>
</table>

关于css - 滚动时固定表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47638015/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com