Question

我正在使用Bootstrap V4 alpha 6和Angular 5在滚动时创建一个带有固定标头的表格。但是，我似乎无法让它发挥作用。

注意：navbar为fixed-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。

Answer 1

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

＆＃13;

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"
    });
  }
};

＆＃13;

<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>

＆＃13;

滚动时固定表头

1 个答案: