Angular 角度2+；-AdvancedSortableDirective-Bootstrap 4：响应表：如何防止排序事件影响表列的宽度？

我们有一张反应灵敏的桌子。 我们已经在每一列上应用了排序功能。 根据列的内容（这是一个多页表），列的宽度趋于“跳跃”（改变）

我收到了一个阻止这种情况发生的请求，但在维护一个响应表的同时无法做到这一点

{{'ARTICLECODE'| translate}}
{{‘全名’|翻译}
{{'TYPE'| translate}}
{{‘描述’|翻译}
{{‘位置’|翻译}
{{'LOCATIONTYPE'| translate}}
{{‘价格’|翻译}
{{table.articleCode}
{{table.fullname}
{{table.Type}
{{table.Description}}
{{table.location}
{{table.locationType}
{{table.Price}}

我能想到的最好办法是，保持桌子的响应速度直到750像素。然后添加一个固定的表布局，列的宽度由%定义

@仅媒体屏幕和（最小宽度：750px）{
桌子{
表布局：固定；
}
.表-width-5{
宽度：5%；
}
.表格宽度-10{
宽度：10%；
}
.表格-15{
宽度：15%；
}
.桌宽-30{
宽度：30%；
}
}
@仅介质屏幕和（最小宽度：1500px）{
桌子{
表布局：固定；
}
.表-width-5{
宽度：4%；
}
.表格宽度-10{
宽度：8%；
}
.表格-15{
宽度：12%；
}
.桌宽-30{
宽度：24%；
}
}

然后是桌子

条款代码
全名
类型
位置
位置类型
价格
描述
{{table.articleCode}
{{table.fullname}
{{table.Type}
{{table.location}
{{table.locationType}
{{table.Price}}
{{table.Description}}

在我们使用的角度方面

从“../../../shared/AdvancedTable/advancedSortable.directive”导入{AdvancedSortable指令，SortEvent}”；
@ViewChildren（AdvancedSortableDirective）标题：QueryList；
private _sortColumn:string；
@输入（）
获取sortColumn（）：字符串{
将此返回。\u sortColumn；
};
设置sortColumn（值：字符串）{
if（this.\u sortColumn！==值）{
这是。\ u sortColumn=值；
this.sortColumnChange.emit（值）；
}
}
@Output（）sortColumnChange:EventEmitter=neweventEmitter（）；
private _sortDirection:字符串；
@输入（）
获取sortDirection（）：字符串{
把这个还给我；
};
设置排序方向（值：字符串）{
if（this.\u sortDirection！==值）{
这是。\ u sortDirection=值；
this.sortDirectionChange.emit（值）；
}
}
@Output（）sortDirectionChange:EventEmitter=新的EventEmitter（）；
onSort（{column，direction}:SortEvent）{
//重置其他标题
this.headers.forEach（header=>{
if（header.sortable！==列）{
header.direction=''；
}
});
this.sortColumn=列；
这个.sortDirection=方向；
}

如果有人知道一种策略，可以在保持表响应的同时防止列宽发生变化，请与我们分享

谢谢你，祝你好运，保重