使用Tailwind CSS，我在我的项目中有这个表。

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
 <table class="w-full text-sm text-left rtl:text-right text-gray-500">
  <thead class="text-xs text-white uppercase bg-gray-900">
   <tr>
    <th class="px-6 py-3">Name</th>
    <th class="px-6 py-3">Actions</th>
   </tr>
  </thead>
  <tbody>
   <tr class="bg-gray-50 border-b">
    <td class="px-6 py-3 text-sm font-medium text-gray-900">John Doe</td>
    <td class="px-6 py-3">
     <div onclick="openTableDropdown(1)" class="relative cursor-pointer inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 hover:text-gray-500">
      clickable icone
      <div id="tableDropdown-1" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 absolute bottom-0 left-1/2 transform translate-y-full -translate-x-1/2 z-10">
       <ul>
        <li class="px-6 pt-2 pb-1 hover:bg-gray-200 rounded-t-lg">Action 1</li>
        <li class="px-6 py-1 hover:bg-gray-200">Action 2</li>
        <li class="px-6 pt-1 pb-2 hover:bg-gray-200 rounded-b-lg">Action 3</li>
       </ul>
      </div>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>

字符串
我有这个简单的函数来切换：

function openTableDropdown(id){
 var dropdown = document.getElementById(`tableDropdown-${id}`);
 dropdown.classList.toggle('hidden');
}

型
一切正常，除了当我打开表的最后一行的按钮时。
为了显示元素，div在表格中显示垂直滚动。有没有办法在表格上方显示绝对元素？
这就是现在的输出，但是我想在表上重叠元素，避免垂直滚动。
x1c 0d1x的数据
我试着改变z-index，但它不工作。

**编辑：**问题是主div上的类“overflow-x-auto”，但我需要该类允许移动的上的X滚动。