使用Angular 4中的固定标头调整可滚动表的大小

Question

我写了一个resize服务，对所有调整大小事件都很有用。我能够调整div和诸如此类的东西，但我正在努力使用我的“固定大小”表。我可以将它作为可滚动表的唯一方法是通过硬编码CSS中的高度。我正在努力使表格随屏幕调整大小。我究竟做错了什么？请原谅我下面糟糕的编码习惯。

表格代码：

<table class="table table-fixed" id="div-table" [style.scrollheight]="tableHeight">
      <thead>
           <tr>
                <th class="col-xs-9">Division</th>
                <th class="col-xs-3 text-left">Status</th>
           </tr>
           <tr *ngIf="showsearch">
                <div class="input-group">
                     <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                     <input type="text" class="form-control" placeholder="Search">
                </div>
           </tr>
      </thead>
      <tbody [style.scrollheight]="tableHeight">   
           <tr class="tabledata" *ngFor="let division of divisions" (click)="onDivisionChange(division)" [class.selectedrow]="getClass(division)">
                <td class="col-xs-9 text-left">{{division.Name}}</td>
                <td class="col-xs-3 text-left">{{division.isActive==true? "Active":"Inactive"}}</td>
           </tr>
      </tbody>
      <td colspan="2" style="width: 100%" *ngIf="addnew"><button class="btn btn-info" style="width: 100%">Add New Division</button></td>
 </table>

CSS：

.table-fixed thead {
     width: 97%;
}

.table-fixed {
     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;
}

角：

tableHeight: SafeStyle;
constructor(
          private sanitizer: DomSanitizer,
          private resizeService: ResizeService) {
               resizeService.height$.subscribe((value:any) => {
                    this.tableHeight = sanitizer.bypassSecurityTrustStyle(`height: (value-157) +'px'`);
               });
          }