表格字段中的下拉菜单导致垂直滚动

Answer 1

您需要对代码进行一些更改。 看下面的代码：

<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 top-full left-1/2 transform -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>

尝试一下，让我知道效果如何。谢谢你。