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

Question

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

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;
}

我正面临这样的对齐问题

请帮助或建议我任何其他可用于在 ngFor 表中固定标题的方法

Answer 1

你可以为此使用插件，我已经使用了这些并取得了很好的效果，请查看下面的链接。

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