如何在角度水平调整div列的大小？

Question

我需要帮助来使数据表中的div列可调整大小。

我正在使用角度4。

已经尝试过水平调整大小，它不起作用并且看起来很糟糕，我想在调整一列的大小时，同时调整所有列的大小。

resize: horizontal;
overflow: auto;

这是专栏的屏幕截图：

数据表的HTML代码：

<nano-table *ngIf="campaignListDto.isLoaded === true"
            [@fadeIn]="'in'"
            [tableList]="campaignListDto.list"
            [columnsArray]="columnsArray"
            [pageCount]="5"
            [sortField]="'impressions'"
            [sortInverse]="true">
    <ng-template let-campaignListDtoData="item">

        <!-- THIS COLUMN SHOULD BE RESIZABLE -->
        <div class="nano-table-entity-name-cell">
            <span [tooltip]="campaignListDtoData.name" 
                  [routerLink]="['/private/advertiser/' + advertiserId + '/advertiserIo/' + advertiserIoId +'/campaign/' + campaignListDtoData.id]"
                  class="nano-c-p">
                {{ campaignListDtoData.name }}
            </span>
            <span>
                {{ campaignListDtoData.id }}
            </span>
        </div>

        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.revenue | number:'.2-2' }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.cost | number:'.2-2' }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.impressions | number }}
            </span>
        </div>
        <div class="nano-table-number-cell">
            <span>
                {{ campaignListDtoData.clicks | number }}
            </span>
        </div>

    </ng-template>
</nano-table>

Table.scss文件：：

   nano-table-grid {
  //flex: 1;
  .nano-table-grid-header {
    > div {
      border-bottom: 1px solid $nano-dark-grey;
      //padding: 0 5px;
      cursor: pointer;
      font-family: inherit !important;
      i {
        margin: auto 0 auto 2px;
      }
      &.sort-active {
        background-color: rgba(141, 192, 219, .25);
      }
    }
  }
  .nano-table-row {
    display: flex;
    padding: 5px 0;
    flex-wrap: wrap;
    border: 1px solid transparent;
    > div {
      flex: 1;
      display: flex; 
      overflow: hidden;
      margin: 0 2px;
      > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .nano-table-placement-name-cell {
      flex: 2;
      flex-direction: column;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-entity-name-cell {
      flex: 3;
      flex-direction: column;
      border-right: 1px solid #e0e0e0;
      span {
        margin: auto auto auto 0;
        max-width: 100%;
        &:nth-child(2) {
          //font-weight: bold;
        }
      }
      .tooltip-inner {
        max-width: inherit;
      }
    }
    .nano-table-name-cell {
      font-family: monospace;
      flex: 3;
      span {
        margin: auto 0;
      }
    }

欢迎任何建议。