twitter-bootstrap 滚动时固定表格标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47638015/
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
Make table header fixed when scrolling
提问by derrickrozay
I am using Bootstrap V4 alpha 6along with Angular 5to create a table with a fixed header when scrolling. However, I can't seem to get it to work.
滚动时，我正在使用Bootstrap V4 alpha 6withAngular 5创建一个带有固定标题的表格。但是，我似乎无法让它发挥作用。
Note: The navbaris fixed-top
注意：navbar是fixed-top
Things I've tried:
我尝试过的事情：
1) Add fixed-topclass to thead.
1) 将fixed-top类添加到thead.
2)
2)
thead {
position: sticky;
top: 0;
}
3)
3)
thead {
display:block;
}
4) Lots of CSS but nothing works because the table is responsive and scrollable and there are multiple header rows.
4) 很多 CSS 但没有任何效果，因为表格是响应式和可滚动的，并且有多个标题行。
What am I doing wrong?
我究竟做错了什么？
<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>
I've also created a plnkr.
我还创建了一个plnkr。
回答by Sam Tomashi
The easiest way to achieve this is to create your own JavaScript function to manipulate the behavior as required. Play around with the following snippet code to meet your expectations.
实现此目的的最简单方法是创建您自己的 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>