根本原因是表格盒模型干扰.popper reference定位，导致下拉菜单位置计算错误并被overflow截断；需为触发按钮父元素设position: relative、移除表格内部overflow限制、添加data-bs-boundary="viewport"。
根本原因不是表格本身，而是 .dropdown-menu 的定位容器（popper reference）被表格盒模型干扰，导致 Popper 计算出的浮层位置错误，进而被父级 overflow: hidden 或 max-height 截断。
为什么表格结构会让下拉菜单“消失”或错位
Bootstrap 5 的 .dropdown-menu 依赖 Popper 定位，而 Popper 需要一个明确的、有定位上下文的锚点元素（通常是触发按钮）。当你把 button[data-bs-toggle="dropdown"] 嵌在 <table>、<code><tr>、<code><td> 里时，问题就来了：
<ul><li><code><table> 默认是 <code>display: table，不创建新的定位上下文（即不触发 position: relative 效果），Popper 会向上查找最近的 position: relative 祖先 —— 如果没找到，就 fallback 到 body，菜单直接飘到页面左上角
<td> 有默认 <code>vertical-align: middle 和 padding，但它的 overflow 行为不可控；若父 <tr> 或 <code><tbody> 被设了 <code>overflow: hidden（比如某些自定义表格组件），.dropdown-menu 即使定位正确也会被裁剪
height、line-height、border-collapse 等属性会间接影响 Popper 的 boundary 检测逻辑，导致它误判“下方空间不足”，却未触发 flip（翻转）行为如何让 .dropdown-menu 在表格中正常显示
关键不是改菜单样式，而是修复定位链路和容器边界。以下操作必须同时满足：
- 确保触发按钮的**直接父元素**（即包裹
button的<td> 或 <code><div>）显式设置 <code>position: relative—— 这是 Popper 锚定的起点 - 删掉所有对
<table>、<code><tbody>、<code><tr> 的 <code>overflow: hidden或max-height设置；如需限制高度，请用max-height+overflow-y: auto包裹整个<table> 外层 <code><div>，而非内部 <li>给 <code>.dropdown-menu显式加data-bs-boundary="viewport"属性，强制 Popper 把视口作为检测边界，避免被表格行高误判 - 如果仍被截断，临时加
style="z-index: 1060 !important;"到.dropdown-menu上，排除 z-index 被表格transform或isolation隔离的问题 -
dropdown-menu-end要求锚点容器有position: relative，否则右对齐参考的是body宽度，菜单会飞到屏幕最右边 -
dropup必须加在.dropdown容器上（不是.dropdown-menu），且只有当 Popper 检测到下方空间不足时才生效；表格行高不一致会导致检测失效 - 不要在
<td> 里手动写 <code>style="top: 100%"—— Popper 会覆盖它，反而破坏重定位逻辑最容易被忽略的是：表格中每个
.dropdown必须独立拥有自己的定位上下文，不能靠外层<table> 统一撑开。哪怕只有一行数据出问题，也大概率是那一行的 <code><td> 缺少 <code>position: relative或被某个 CSS 规则意外重置了overflow。
为什么加 dropdown-menu-end 或 dropup 也没用
这些类只控制菜单的对齐方向或展开方向，但前提是菜单得先「被正确渲染出来」。如果 Popper 根本没拿到有效锚点，或者计算出的位置被父容器 overflow 吞掉，那再好看的 class 都只是作用在“看不见的 DOM”上。
立即学习“前端免费学习笔记（深入）”；
