Angular表格内NgbDropdown被容器截断，求CSS解决方案

问题原因 #

你的表格嵌套在.table-responsive.h-100和.table-sticky.h-100容器中，这些容器默认通过overflow属性实现滚动，导致内部的ngbDropdown下拉菜单被容器边界裁剪。拖动滚动条时浏览器临时渲染行为会让下拉短暂显示，松开后则恢复裁剪逻辑。

CSS解决方案 #

以下是纯CSS层面的修复方案，无需修改组件逻辑：

/* 让下拉菜单脱离父容器的裁剪范围 */
.ngb-dropdown-menu {
  position: fixed !important;
  z-index: 1050 !important; /* 确保下拉层级高于表格及其他页面元素 */
}

/* 移除滚动容器的overflow裁剪限制，同时保留表格内容的滚动能力 */
.table-responsive.h-100,
.table-sticky.h-100 {
  overflow: visible !important;
}

/* 给表格本身设置垂直滚动，保证表格内容正常滚动 */
.table-sticky.h-100 table {
  display: block;
  overflow-y: auto;
  max-height: calc(100vh - 120px); /* 根据页面布局调整高度，避免超出视口 */
}

/* 修复表头粘性效果（如需保留表头固定） */
.table-sticky.h-100 thead {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 用背景色覆盖下方滚动的内容 */
  z-index: 10;
}

方案说明 #

1. 固定定位下拉菜单：将.ngb-dropdown-menu设为fixed定位，完全脱离当前滚动容器的上下文，不会被父容器的overflow属性裁剪。
2. 调整容器overflow：移除父容器的overflow限制，避免裁剪下拉元素；同时给表格本身设置滚动，保证表格内容的正常滚动体验。
3. 修复表头粘性：如果原本的.table-sticky是用来实现表头固定的，重新设置position: sticky并添加背景色，确保表头不会被内容覆盖。

若页面布局有特殊高度限制，可自行调整max-height的数值适配。

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