Angular自定义HTML Table列宽调整异常，求实现ag-grid式滚动效果

问题现状 #

基于普通HTML Table开发Angular列宽调整指令时，拖动某一列向右调整宽度，其余所有列会随之改变尺寸，无法在列宽总和超出视口时触发横向滚动条，达不到ag-grid的列宽调整表现。

核心原因 #

1. 表格默认table-layout: auto布局会让浏览器根据内容自动计算列宽，拖动列宽时会触发全表重排，导致其他列被挤压或拉伸
2. 表格容器未设置宽度限制与横向溢出规则，无法触发滚动条逻辑

具体修改步骤 #

1. 配置表格容器样式 #

给表格父容器添加固定宽度约束与横向溢出属性：

.table-container {
  width: 100%;
  overflow-x: auto;
}

2. 设置表格固定布局模式 #

给表格添加table-layout: fixed样式，让列宽由指定值决定，而非内容自适应：

.resizable-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

3. 优化列宽调整指令逻辑 #

确保拖动时仅修改当前列宽度，不触发全表重排：

• 拖动开始时记录当前列初始宽度与鼠标位置
• 拖动过程中仅更新当前列的width样式

指令核心逻辑示例：

@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
  event.preventDefault();
  this.startX = event.clientX;
  this.startWidth = this.el.nativeElement.parentElement.offsetWidth;
  document.addEventListener('mousemove', this.onMouseMove);
  document.addEventListener('mouseup', this.onMouseUp);
}

private onMouseMove = (event: MouseEvent) => {
  const deltaX = event.clientX - this.startX;
  const newWidth = this.startWidth + deltaX;
  this.el.nativeElement.parentElement.style.width = `${newWidth}px`;
};

4. 初始化列宽 #

给每一列设置明确的初始宽度，避免浏览器自动分配：

<div class="table-container">
  <table class="resizable-table">
    <thead>
      <tr>
        <th style="width: 150px;">列1 <app-resizable></app-resizable></th>
        <th style="width: 200px;">列2 <app-resizable></app-resizable></th>
        <th style="width: 180px;">列3 <app-resizable></app-resizable></th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

效果验证 #

修改完成后，拖动列宽时仅当前列宽度变化，当所有列宽总和超过容器宽度时，容器会自动出现横向滚动条，与ag-grid的列宽调整表现一致。

内容的提问来源于stack exchange，提问作者Uma Devi Palla