Question

我在一个使用Angular 5的项目中，我试图在其中包含一个表以及一个垂直和水平滚动条（具有固定的左列和标题），垂直滚动条有效，但水平滚动条无效，更糟糕的是，我的内部是分两行显示。我的列数也是一个变量，我希望表格的宽度为100％。如何达到100％的桌子宽度？

我的代码：

css：

.table-tendency thead, .table-tendency tbody,.table-tendency tr,.table-tendency td, .table-tendency th { display: block; }

.table-tendency tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

.table-tendency thead td {
   height: 50px;
   font-weight: normal;

 }

.table-tendency tbody {
  max-height: 400px;
  overflow-y: scroll;
}

.table-tendency {
  overflow-x: scroll;
}

.table-tendency thead td {
  width: 16.4% ;
  float: left;
  text-align: center;
}

.table-tendency tbody td {
  width: 16.6% ;
  float: left;
  text-align: center;
}

HTML

        <div class=" table-responsive marge" *ngIf="selectedForecastSection.name !== '' && showTendencies">
          <table class="table table-striped table-tendency">
            <thead>
                <tr>
                    <td> {{'Year' | translate}}</td>
                    <td  *ngFor="let tendencyPeriod of tendencyPeriods"> {{tendencyPeriod.name}}</td>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let year of years" >
                    <td class="yearColumn"> {{year}}</td>
                    <td   *ngFor="let tendencyPeriod of tendencyPeriods"> 
                        <span  [ngStyle]="setFont(dataFilter(year, tendencyPeriod.id))">    {{dataFilter(year, tendencyPeriod.id).anyVehicleFlow | number:'1.2-2'}}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

固定表AND标题与两个滚动表

0 个答案: