上下表格横向滚动冲突：第二表格首行无法独立滚动

1. 修正CSS类名语法错误 #

你代码中的.table wrapper是无效类名（类名不能包含空格），先修正为正确的.table-wrapper，同时添加属性创建独立堆叠上下文，避免事件穿透：

.table-wrapper {
  overflow-x: auto;
  position: relative;
  z-index: 1;
}

.one { margin-bottom: 10px; }
.two { margin-top: 10px; }

2. 阻止滚动事件冒泡 #

滚动事件会向上冒泡到父元素，导致拖动区域触发错误的滚动。给每个表格容器添加事件阻止冒泡：

<div class="table-wrapper one" (scroll)="$event.stopPropagation()">
    <table class="table top">
        <tr *ngFor="let item of items">
            <td>{{item.number}}</td>
            <td>
                <mat-form-field>
                    <input matInput noteInput ngModelOptions="{standalone: true}" [matAutocomplete]="notes" />
                    <mat-autocomplete #notes="matAutocomplete">
                        <mat-option *ngFor="let n of notesList">{{n}}</mat-option>
                    </mat-autocomplete>
                </mat-form-field>
            </td>
        </tr>
    </table>
</div>

<div class="middle-content" style="overflow-x: auto; position: relative; z-index: 1; margin: 10px 0;">
    some scrollable content
</div>

<div class="table-wrapper two" (scroll)="$event.stopPropagation()">
    <table class="table top">
        <tr *ngFor="let item of items">
            <td>{{item.number}}</td>
            <td>
                <mat-form-field>
                    <input matInput noteInput ngModelOptions="{standalone: true}" [matAutocomplete]="notes" />
                    <mat-autocomplete #notes="matAutocomplete">
                        <mat-option *ngFor="let n of notesList">{{n}}</mat-option>
                    </mat-autocomplete>
                </mat-form-field>
            </td>
        </tr>
    </table>
</div>

3. 修正mat-autocomplete组件语法错误 #

你的代码存在两处Angular组件语法错误，会导致组件异常进而影响事件捕获：

• matAutoComplete需改为绑定语法[matAutocomplete]，并匹配mat-autocomplete的模板引用变量#notes
• ngFor中的for需改为正确的of

原理说明 #

• position: relative + z-index 让每个滚动容器创建独立堆叠上下文，确保鼠标事件仅被当前容器捕获，不会穿透到其他元素
• stopPropagation() 阻止滚动事件向上冒泡，避免父元素误触发滚动
• 修正组件语法错误确保Angular组件正常渲染，消除因组件异常导致的事件混乱

内容的提问来源于stack exchange，提问作者Verigueme