title: Make table header fixed when scrolling
body: <p>I am using <code>Bootstrap V4 alpha 6</code> along with <code>Angular 5</code> to create a table with a fixed header when scrolling. However, I can't seem to get it to work.</p>
  
  <p>Note: The <code>navbar</code> is <code>fixed-top</code></p>
  
  <p>Things I've tried:</p>
  
  <p>1) Add <code>fixed-top</code> class to <code>thead</code>.</p>
  
  <p>2) </p>
  
  <pre><code>thead {
    position: sticky;
    top: 0;
  }
  </code></pre>
  
  <p>3) </p>
  
  <pre><code>thead {
    display:block;
  }
  </code></pre>
  
  <p>4) Lots of CSS but nothing works because the table is responsive and scrollable and there are multiple header rows.</p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"&gt;
  &lt;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"&gt;
  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;a class="navbar-brand" href="#"&gt;
  &lt;img src="./assets/logo.png" width="200" height="40" class="d-inline-block align-top" alt=""&gt;
  &lt;/a&gt;
  &lt;/nav&gt;
  &lt;table class="table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed"&gt;
  &lt;thead class="sticky-top"&gt;
  &lt;tr&gt;
    &lt;th colspan="16" class="text-center"&gt;PROJECT 1&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th rowspan="2"&gt;WON&lt;/th&gt;
    &lt;th rowspan="2"&gt;LST #&lt;/th&gt;
    &lt;th rowspan="2"&gt;FLR #&lt;/th&gt;
    &lt;th colspan="3"&gt;GLS&lt;/th&gt;
    &lt;th colspan="7"&gt;FRMS&lt;/th&gt;
    &lt;th rowspan="2"&gt;Scheduled Date&lt;/th&gt;
    &lt;th rowspan="2"&gt;Cmplt Date&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;G Reqd&lt;/th&gt;
    &lt;th colspan="2"&gt;G Rcvd (%)&lt;/th&gt;
    &lt;th&gt;Frms Reqd&lt;/th&gt;
    &lt;th colspan="2"&gt;Frms Ass (%)&lt;/th&gt;
    &lt;th colspan="2"&gt;Frms Line (%)&lt;/th&gt;
    &lt;th colspan="2"&gt;Frms Cmplt (%)&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
  &lt;tr *ngFor="let project of projectData"&gt;
    &lt;td&gt;{{project.ordernumber}}&lt;/td&gt;
    &lt;td&gt;{{project.ListNumber}}&lt;/td&gt;
    &lt;td&gt;{{project.floorID}}&lt;/td&gt;
      &lt;td&gt;{{project.glassRequired}}&lt;/td&gt;
      &lt;td&gt;{{project.glassReceived}}&lt;/td&gt;
      &lt;td&gt;{{project.glassReceivedPercent}}&lt;/td&gt;
    &lt;td&gt;{{project.framesRequired}}&lt;/td&gt;
    &lt;td&gt;{{project.framesAssembled}}&lt;/td&gt;
    &lt;td&gt;{{project.framesAssembledPercent}}%&lt;/td&gt;
    &lt;td&gt;{{project.framesGlazed}}&lt;/td&gt;
    &lt;td&gt;{{project.framesGlazedPercent}}%&lt;/td&gt;
    &lt;td&gt;{{project.framesShipped}}&lt;/td&gt;
    &lt;td&gt;{{project.framesShippedPercent}}%&lt;/td&gt;
    &lt;td&gt;{{project.deliverydate}}&lt;/td&gt;
   &lt;td&gt;Not Shipped Yet&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I've also created a <a href="https://plnkr.co/edit/FpyPcnWwxHa21VfZ07iJ" rel="nofollow noreferrer">plnkr</a>.</p>