title: How can i make table headers fixed for a table populated using *ngFor Angular2 (without plug-ins)
body: <p>I tried to create different header and body and keep header as fixed , Iam able to keep headers as fixed but facing alignment issues. Below is my code</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table table-bordered table-font" style="margin-bottom: 0px!important;margin-left:38px;width:97%!important"&gt;
     &lt;thead class="blue-bg"&gt;
        &lt;tr&gt;
           &lt;th&gt;Header1&lt;/th&gt;
           &lt;th&gt;Header2&lt;/th&gt;
           &lt;th&gt;Header3&lt;/th&gt;
           &lt;th&gt;Header4&lt;/th&gt;
           &lt;th&gt;Header5&lt;/th&gt;
           &lt;th&gt;Header6&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
  &lt;/table&gt;
  &lt;div class="child-grid no-flick" style="margin-left:38px;"&gt;
  &lt;table class="table table-bordered table-font"&gt;
     &lt;tbody&gt;
        &lt;tr *ngFor='let RowData of datasource"&gt;  /*ngFor Used Here*/
        &lt;td&gt;   {{RowData.Data1}}&lt;/td&gt;
        &lt;td&gt;   {{RowData.Data2}}&lt;/td&gt;
        &lt;td&gt;   {{RowData.Data3}}&lt;/td&gt;
        &lt;td&gt;   {{RowData.Data4}}&lt;/td&gt;
        &lt;td&gt;   {{RowData.Data5}}&lt;/td&gt;
        &lt;td&gt;   {{RowData.Data6}}&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.blue-bg {
      background-color: #4472C4;
      color: white;
  }
  
  .child-grid{
      max-height:500px !important;
      overflow-y:scroll!important;
  }
  
  
  .no-flick{
      -webkit-transform:translate3d(0,0,0);
      }
  
      .table-fixed thead {
    width: 97%;
  }
  .table-fixed tbody {
    height: 230px;
    overflow-y: auto;
    width: 100%;
  }
  .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
  }
  .table-fixed tbody td, .table-fixed thead &gt; tr&gt; th {
    float: left;
    border-bottom-width: 0;
  }
  </code></pre>
  
  <p>Iam facing allignment issues like  this </p>
  
  <p><a href="https://i.stack.imgur.com/3CAso.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3CAso.png" alt="Border of &lt;th&gt; and &lt;tr&gt; arent matching "></a></p>
  
  <p>Please help or suggest me any other method that can be used for having fixed headers in a table with ngFor</p>