滚动时固定表格标题 | 滚动时固定表格标题

本文介绍了滚动时固定表格标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using Bootstrap V4 alpha 6 along with Angular 5 to create a table with a fixed header when scrolling. However, I can't seem to get it to work.

注意:navbar 是 fixed-top

我尝试过的事情:

1) 将 fixed-top 类添加到 thead.

1) Add fixed-top class to thead.

thead {
  position: sticky;
  top: 0;
}

thead {
  display:block;
}

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

4) Lots of CSS but nothing works because the table is responsive and scrollable and there are multiple header rows.

我做错了什么?

<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 函数来根据需要操作行为.使用以下代码片段来满足您的期望.

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.

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>

这篇关于滚动时固定表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！