滚动时固定表头

Question

滚动时固定表头

csstwitter-bootstrapbootstrap-4

4

我正在使用 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。

- derrickrozay

你可以看一下这个 https://bootsnipp.com/snippets/oVlgM - Abdoulie Kassama

我以前尝试过这个，但是通过视觉方式从表格中移除表头是不可能的。这会破坏表格布局，总体上行不通。我之前做的是创建一个完全独立的表格，只包含表头，没有正文内容。通过JS调整所有列的大小，然后根据页面滚动位置隐藏/显示它。虽然需要很多工作，但效果确实很好！ - FiniteLooper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam Tomashi · Accepted Answer

最简单的方法是创建自己的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>