Make table header fixed when scrolling

Question

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.

Note: The navbar is fixed-top

Things I've tried:

1) Add fixed-top class to thead.

2)

thead {
  position: sticky;
  top: 0;
}

3)

thead {
  display:block;
}

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

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.

Answer 1

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>