1

我编写了一个调整大小服务，它对所有调整大小事件都非常有用。我能够调整 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'`);
               });
          }
4

0 回答 0