垂直滚动条h​​tml

Question

我们正在使用Angular js，并且难以按照表格对齐本机滚动条。该表是动态的，非常大，有很多列和行。 我们有一个父div，它包含许多项目以及此表。 我们需要使用浏览器滚动条来查找表格的水平滚动条以及垂直相同的情况。我们需要将水平滚动条移动到最右端以查看垂直滚动条。由于该应用程序不是用户友好的。

我们被要求提供一个按照表格扩展的单个滚动条。 附上截图。 如果您有任何建议，请提供。

如果需要，我可以提供css 。

CSS

        .scrollableDiv {
        height: 60%;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-left: 15px;
    }
    .kpi-table td,
    .kpi-table th {
        padding: .50rem;
        vertical-align: bottom;
        border-top: 0;
        word-wrap: break-word;
    }
    .kpi-table table,
    thead tr td {
        border: 1px solid white;
        border-bottom: 1px solid #b3b3b3!important;
    }
    .kpi-table table,
    thead {
        overflow-x: auto;
        overflow-y: auto;
    }
    .kpi-table tbody {
        display: block;
        height: 40vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .kpi-table thead {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .kpi-table thead {
        width: calc( 100% )
    }
    .kpi-table tbody {
        width: calc( 100% + 1.3em)
    }
    .kpi-table table {
        width: calc(100% + 50em);
        overflow-x: auto;
        overflow-y: auto;
    }


    <div class="scrollableDiv kpi-table table-responsive">
      <table id="maintable" [ngStyle]="{'width':getTableWidth()}" class="table-hover table-bordered" *ngIf="kpiLoaded">
        <thead id="maintablehead">
          .................................
        </thead>
        <tbody id="maintablebody" [ngStyle]="{'height':getTableBodyHeight()}" *ngIf="originalReportJSON">
          <tr *ngFor="let channel of filteredReportJSON | orderBy : 'source' : sortReverse ; let i = index">
            <td class="kpi-col-9 name" [ngStyle]="{'width':getFixedColWidth()}">{{s.name}}</td>
            <td class="kpi-col-9 source-name" [ngStyle]="{'width':getFixedColWidth()}">{{channel.source}}</td>
            <td [ngStyle]="{'width':getTableCellWidth()}" *ngFor="let kpi of channel.kpi | orderBy :'groupName'; let j = index" [hidden]="!getGroupDisplay(kpi.groupName)"
              [ngClass]="getClass(kpi.result)" (click)="kpi.result == 'na' ? true : setUpKPI(kpi,channel)" [attr.data-toggle]="kpi.result == 'na' ? '' : 'modal'"
              data-target="#myModal" (mouseover)="changeStyle($event,kpi.result)" (mouseout)="changeStyle($event,kpi.result)" [attr.id]="'td'+'_'+i+'_'+j">
              {{kpi.result == 'na' ? 'NA' : kpi.percentage}}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="col-xs-12 content-box loading" *ngIf="isLoading">
      </div>
      <div class="no-result" i18n=@@noresults *ngIf="! originalReportJSON">No Results</div>
    </div>

Answer 1

我能够通过更新html和css解决问题