title: How to make fixed column headers for a bootstrap table? Same format
body: <p>I'd like to keep the same style of the current table and add a fixed header. However, I'm having issues with making the header fixed. This page contains 4 tables with similar formatting. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-wrapper-2 {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    &lt;div class="card-body"&gt;
      &lt;div class="table-wrapper-2"&gt;
  
        &lt;table class="table table-striped table-bordered table-fixed" id="entityTable"&gt;
          &lt;thead&gt;
            &lt;tr class="table-primary"&gt;
              &lt;th scope="col" style="width: 3%"&gt;#&lt;/th&gt;
              &lt;th scope="col" style="width: 19%"&gt;ID&lt;/th&gt;
              &lt;th scope="col" style="width:19%"&gt;Col 1&lt;/th&gt;
              &lt;th scope="col" style="width: 19%"&gt;Col 2&lt;/th&gt;
              &lt;th scope="col" style="width: 19%"&gt;Col 3&lt;/th&gt;
              &lt;th scope="col" style="width: 19%"&gt;Col 4&lt;/th&gt;
  
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let id of transactionId, let i = index" class="clickable-row" (click)="onTransactionIdChange(id)"&gt;
              &lt;td&gt;{{i+1}}&lt;/td&gt;
              &lt;td&gt;{{id}}&lt;/td&gt;
              &lt;td&gt;{{col1[i]}}&lt;/td&gt;
              &lt;td&gt;{{col2[i]}}&lt;/td&gt;
              &lt;td&gt;{{col3[i]}}&lt;/td&gt;
              &lt;td&gt;{{col4[i]}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>