Tailwind CSS带圆角表格实现下拉菜单完整显示的最佳解决方法是什么

方案1：单元格单独圆角实现（无兼容性问题，最推荐） #

该方案无需给表格外层容器加overflow-hidden，从根源避免溢出截断问题，同时完美保留圆角效果：

• 给table元素添加border-separate border-spacing-0类，开启独立边框模式、清除默认单元格间距，解决默认表格下border-radius不生效的问题
• 针对表格四个角的单元格单独设置圆角：首行第一个单元格加rounded-tl-lg、首行最后一个单元格加rounded-tr-lg、末行第一个单元格加rounded-bl-lg、末行最后一个单元格加rounded-br-lg
• 如果需要支持表格横向滚动，仅需要在外层容器加overflow-x-auto即可，不会影响圆角也不会截断下拉元素

示例实现代码：

<div class="w-full border rounded-lg overflow-x-auto">
  <table class="w-full border-separate border-spacing-0">
    <thead>
      <tr class="bg-gray-50">
        <th class="border-b p-4 text-left rounded-tl-lg">姓名</th>
        <th class="border-b p-4 text-left">年龄</th>
        <th class="border-b p-4 text-right rounded-tr-lg">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border-b p-4">张三</td>
        <td class="border-b p-4">28</td>
        <td class="border-b p-4 text-right relative">
          <button class="px-3 py-1 bg-blue-500 text-white rounded">更多操作</button>
          <!-- 下拉菜单可正常完整显示，不会被截断 -->
          <div class="absolute top-full right-0 mt-1 w-28 bg-white shadow-md rounded z-10">
            <div class="p-2 hover:bg-gray-50">编辑</div>
            <div class="p-2 hover:bg-gray-50">删除</div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="p-4 rounded-bl-lg">李四</td>
        <td class="p-4">32</td>
        <td class="p-4 text-right rounded-br-lg">
          <button class="px-3 py-1 bg-blue-500 text-white rounded">更多操作</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

方案2：使用传送门挂载下拉节点 #

如果是基于Vue、React等框架开发，可以使用框架内置的Teleport/Portal能力，将下拉菜单元素直接挂载到body等不受表格容器overflow-hidden影响的根节点下，仅需要通过JS计算下拉菜单相对于触发按钮的坐标即可，这种方案可以保留容器原有的overflow-hidden设置，无需修改原有表格的圆角实现逻辑。

方案3：扩展容器溢出空间（局限性高，仅作参考） #

如果下拉菜单仅会出现在表格固定位置，可给表格外层容器添加对应方向的padding预留显示空间，同时配合负margin抵消padding对页面布局的影响，该方案仅适合下拉位置固定的简单场景，通用性较差。

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