引导表中的动态固定列

Question

我有一个表，该表可以有动态的列数，并且这些列中的任何列都可以固定，即，不应水平滚动。 我在需要的地方添加了[ngStyle]，但是桌子变得一团糟。所有列的宽度也是动态的。

HTML代码：

<div class="bootstrap4 grid">
    <toolbar [gridConfig]="config"
             [dataSource]="dataSource"
             [toggleFilters]="toggleFilters"
             [toggleColumn]="toggleColumn"
             [filtersVisible]="filtersVisible"
             [gridDisabled]="disabled"></toolbar>
    <div [ngClass]="{'scrollable': isScrollable()}">
    <table class="table table-striped table-hover">
        <colgroup>
            <col *ngFor="let columnConfig of getVisibleColumns()"
                 [ngStyle]="getColumnStyle(columnConfig)"/>
        </colgroup>
        <thead>
        <tr>
            <th [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                class="{{getSortedClass(columnConfig)}}">
                <grid-header [columnConfig]="columnConfig"
                             [dataSource]="dataSource"
                             [gridSortable]="config.sortable">
                </grid-header>
            </th>
        </tr>
        <tr *ngIf="filtersVisible">
            <th [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                class="filter-wrapper">
                <ng-container *ngIf="!isCommandColumn(columnConfig); then gridFilter else gridFilterCommands"></ng-container>
                <ng-template #gridFilter>
                    <grid-filter *ngIf="isFilterVisible(columnConfig.filterable)"
                                 [columnConfig]="columnConfig"
                                 [filter]="dataSource.currentFilter(columnConfig.field)">
                    </grid-filter>
                </ng-template>
                <ng-template #gridFilterCommands>
                    <grid-filter-commands [filters]="dataSource.filters">
                    </grid-filter-commands>
                </ng-template>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let rowData of dataSource.dataToDisplay()">
            <td [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                cell-wrapper
                [columnConfig]="columnConfig"
                [rowData]="rowData"
                [onClick]="getCellWrapperClickAction(columnConfig)"
                [classes]="getCellWrapperClasses(columnConfig, rowData)">
                <grid-cell [columnConfig]="columnConfig"
                           [rowData]="rowData"
                           [cellData]="rowData[columnConfig.field]"
                           [gridDisabled]="disabled">
                </grid-cell>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
    <no-filtered-results [dataSource]="dataSource"></no-filtered-results>
</div>

CSS：

.fixedColumn{
  position: absolute;
}