如何为使用* 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;
}

Iam面临像这样的对齐问题

请帮助或建议我使用ngFor

在表格中使用固定标题的任何其他方法

Answer 1

您可以使用插件，我已经使用了这些效果很好，请查看下面的链接。

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

Answer 2

尝试使用CSS将表格的宽度设置为100％，将单元格的宽度除以100.您有6个单元格，因此100/6 = 16.6666％。查看fiddle. 我不得不删除你的div和你的内联样式，因为他们打破了这个，但你可以在这个CSS周围添加它们。你也可能不需要边框，但是我把它放在那里你可以看到它有效。

table{
  width:100%;
}
td,th{
  width:16.66%;
  border:1px solid black;
  box-sizing:border-box;

}