Angular中mobius1-selectr多选下拉框覆盖表格行求助

我正在Angular项目中创建一个表格，其中某列使用mobius1-selectr实现多选下拉框。当前下拉框展开时无法覆盖表格其余行，被局限在表格范围内，需滚动才能查看完整菜单，问题截图如下：

以下是测试代码片段：

HTML代码 #

<div class=" table-responsive">
            <table class=" table align-items-center table-flush">
                <thead class=" thead-light">
                <tr>
                    <th>User</th>
                    <th>Teams</th>
                    <th>Roles</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="table-user">
                        <img class=" avatar rounded-circle mr-3" src="assets/img/theme/team-1.jpg"/>
                        <b> Test User </b>
                    </td>
                    <td style="z-index: 1020">
                        <select class="form-control" data-toggle="select" id="selectr-multiple" style="z-index: 1020; position: absolute">
                            <option value="test1"> Test 1 </option>
                            <option value="test2"> Test 2 </option>
                            <option value="test3"> Test 3 </option>
                            <option value="test4"> Test 4 </option>
                            <option value="test5"> Test 5 </option>
                            <option value="test6"> Modals </option>
                        </select>
                    </td>
                    <td>
                        <a class=" font-weight-bold" href="javascript:void(0)">
                            Link to Profile
                        </a>
                    </td>
                    <td class=" table-actions">
                        <a
                                class="table-action"
                                tooltip="Edit product"
                                placement="top"
                                href="javascript:void(0)"
                        >
                            <i class=" fas fa-user-edit"> </i>
                        </a>
                        <a
                                class=" table-action table-action-delete"
                                tooltip="Delete product"
                                placement="top"
                                href="javascript:void(0)"
                        >
                            <i class=" fas fa-trash"> </i>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

CSS代码 #

.table-responsive {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-down($breakpoint) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        > .table-bordered {
          border: 0;
        }
      }
    }
  }
}

我并非HTML/CSS专家，恳请指导如何实现下拉框覆盖表格及下方行的效果？

这个问题核心是表格容器的overflow属性限制了下拉菜单的显示范围，同时mobius1-selectr生成的菜单可能继承了父元素的定位上下文，导致无法突破表格层级，按以下步骤调整即可：

• 调整表格容器的溢出规则
  给.table-responsive设置纵向溢出为可见，避免容器裁剪下拉菜单：

  .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
  }
  

• 修改mobius1-selectr的挂载节点
  初始化插件时，将下拉菜单挂载到body上，脱离表格的上下文限制：

  new Selectr('#selectr-multiple', {
    appendTo: document.body,
    multiple: true
  });
  

• 提升下拉菜单的层级
  给插件生成的下拉菜单容器设置足够高的z-index，防止被表格行遮挡：

  .selectr-dropdown {
    z-index: 9999 !important;
  }
  

• 清理无效内联样式
  删除select标签上的position: absolute，插件会自动处理控件定位，该样式会打乱原有布局。

调整完成后，下拉菜单即可正常覆盖表格行，不会被容器裁剪。

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