如何解决可调整大小的主表的冻结部分和可滚动部分之间的空白问题

Question

我需要一个具有冻结列和可滚动列的p表。所有列也可调整大小，并且表处于展开模式。当其中一个冻结列的大小向左调整时，冻结列和可滚动列之间会出现空白。调整列大小时，我不需要冻结部分和可滚动部分之间的空白空间。有什么办法吗？

调整列宽之前的表格：

Year之后的表列通过拖动Year的左边框来调整大小：

“年份”列和“品牌”列之间没有空格。我怎么解决这个问题？而且我必须使用列调整大小模式“扩展”，而不是“适合”模式，因为这是用户的要求。

这是上表的代码段：

scrollableCols = [
  { field: 'brand', header: 'Brand' },
  { field: 'color', header: 'Color' }
];

frozenCols = [
  { field: 'vin', header: 'Vin' },
  { field: 'year', header: 'Year' }
];

cars = [
  { 'vin': 1, 'year': 2011, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 2, 'year': 2012, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 3, 'year': 2013, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 4, 'year': 2014, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 5, 'year': 2015, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 6, 'year': 2016, 'brand': 'Toyota', 'color': 'black' },
  { 'vin': 7, 'year': 2017, 'brand': 'Toyota', 'color': 'black' }
];

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols"  [value]="cars" [scrollable]="true" scrollHeight="200px"    frozenWidth="400px" [resizableColumns]="true"  columnResizeMode="expand">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" style="width:200px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" pResizableColumn>
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns" class="ui-resizable-column">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>