html - 我如何使使用* ngFor Angular2填充的表的表头固定(无插件)

我试图创建不同的标头和正文，并使标头保持固定，但我能够将标头保持固定，但面临对齐问题。下面是我的代码

HTML：

<table class="table table-bordered table-font" style="margin-bottom: 0px!important;margin-left:38px;width:97%!important">
   <thead class="blue-bg">
      <tr>
         <th>Header1</th>
         <th>Header2</th>
         <th>Header3</th>
         <th>Header4</th>
         <th>Header5</th>
         <th>Header6</th>
      </tr>
   </thead>
</table>
<div class="child-grid no-flick" style="margin-left:38px;">
<table class="table table-bordered table-font">
   <tbody>
      <tr *ngFor='let RowData of datasource">  /*ngFor Used Here*/
      <td>   {{RowData.Data1}}</td>
      <td>   {{RowData.Data2}}</td>
      <td>   {{RowData.Data3}}</td>
      <td>   {{RowData.Data4}}</td>
      <td>   {{RowData.Data5}}</td>
      <td>   {{RowData.Data6}}</td>
      </tr>
   </tbody>
</table>

CSS：

.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 > tr> th {
  float: left;
  border-bottom-width: 0;
}

Iam面临着这样的问题



请帮助或建议我使用ngFor在表中具有固定标头的任何其他方法

最佳答案

您可以为此使用插件，我用它们效果很好，请查看下面的链接。

http://www.fixedheadertable.com/
https://datatables.net/extensions/fixedheader/