如何在Bootstrap 5中实现带表格结构的下拉菜单并对齐箭头

我正在使用Bootstrap 5，想用表格替代下拉菜单项，需求如下：

• 设置表格固定宽度
• 第三列文本靠右对齐，让该列的日期与下拉箭头水平对齐，实现箭头上下对齐的效果

用span替代表格时能达到预期效果，但使用当前表格结构时，下拉箭头莫名左移，希望通过表格元素实现单元格定位，解决箭头右移的问题。

原始代码 #

<div class="col-md-12 dropdown" id="premiumsDropdownBtn">
   <div class="dropdown-toggle dropend" role="button" id="dropdownMenu2" data-bs-toggle="dropdown">
   <table>
      <td>Dental: </td>
      <td class="position-relative">PLAN A<span class="dropdown-arrow"></span></td>
      <td style="text-align: right;">1/1/2023 - NA</td>
   </table></div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu3" data-bs-toggle="dropdown">
   <table>
      <td>Dental: </td>
      <td class="position-relative">PLAN B</td>
      <td style="text-align: right;">1/1/2023 - NA</td>
   </table></div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu4" data-bs-toggle="dropdown">
   <table>
      <td>Vision: </td>
      <td class="position-relative">TEST PLAN C<span class="dropdown-arrow"></span></td>
      <td style="text-align: right;">1/1/2023 - NA</td>
   </table></div>
<div class="dropdown-toggle dropend" role="button" id="dropdownMenu5" data-bs-toggle="dropdown">
   <table>
      <td>Vision: </td>
      <td class="position-relative">LONGER PLAN D<span class="dropdown-arrow"></span></td>
      <td style="text-align: right;">1/1/2023 - NA</td>
   </table></div>
</div>

核心修改点 #

1. 修复表格结构：给每个<td>添加<tr>包裹，保证HTML结构合规，避免浏览器异常渲染。
2. 固定表格布局：给表格设置table-layout: fixed; width: 100%;，确保表格宽度固定，列宽可精准控制。
3. 精准定位箭头：给包含箭头的列设置固定宽度和右侧内边距，用Bootstrap的position-absolute end-0 top-50 translate-middle-y类让箭头靠右且垂直居中，避免被表格布局挤压。
4. 统一列宽：给三列分配固定宽度比例，确保所有行的列对齐一致，日期与箭头水平对齐。

修改后完整代码 #

<div class="col-md-12 dropdown" id="premiumsDropdownBtn">
  <div class="dropdown-toggle dropend" role="button" id="dropdownMenu2" data-bs-toggle="dropdown">
    <table style="table-layout: fixed; width: 100%;">
      <tr>
        <td style="width: 15%;">Dental: </td>
        <td class="position-relative" style="width: 60%; padding-right: 25px;">
          PLAN A
          <span class="dropdown-arrow position-absolute end-0 top-50 translate-middle-y"></span>
        </td>
        <td style="width: 25%; text-align: right;">1/1/2023 - NA</td>
      </tr>
    </table>
  </div>
  <div class="dropdown-toggle dropend" role="button" id="dropdownMenu3" data-bs-toggle="dropdown">
    <table style="table-layout: fixed; width: 100%;">
      <tr>
        <td style="width: 15%;">Dental: </td>
        <td class="position-relative" style="width: 60%;">PLAN B</td>
        <td style="width: 25%; text-align: right;">1/1/2023 - NA</td>
      </tr>
    </table>
  </div>
  <div class="dropdown-toggle dropend" role="button" id="dropdownMenu4" data-bs-toggle="dropdown">
    <table style="table-layout: fixed; width: 100%;">
      <tr>
        <td style="width: 15%;">Vision: </td>
        <td class="position-relative" style="width: 60%; padding-right: 25px;">
          TEST PLAN C
          <span class="dropdown-arrow position-absolute end-0 top-50 translate-middle-y"></span>
        </td>
        <td style="width: 25%; text-align: right;">1/1/2023 - NA</td>
      </tr>
    </table>
  </div>
  <div class="dropdown-toggle dropend" role="button" id="dropdownMenu5" data-bs-toggle="dropdown">
    <table style="table-layout: fixed; width: 100%;">
      <tr>
        <td style="width: 15%;">Vision: </td>
        <td class="position-relative" style="width: 60%; padding-right: 25px;">
          LONGER PLAN D
          <span class="dropdown-arrow position-absolute end-0 top-50 translate-middle-y"></span>
        </td>
        <td style="width: 25%; text-align: right;">1/1/2023 - NA</td>
      </tr>
    </table>
  </div>
</div>

补充箭头样式（可选） #

如果需要自定义箭头样式，可添加以下CSS：

.dropdown-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #6c757d; /* 匹配Bootstrap默认下拉箭头颜色 */
}

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