我有一張桌子，是從Flowbite上拿的。該表具有下拉功能和一個& quot添加員工按鈕。在底部，有一個分頁部分。然而，當我將屏幕調整到較小的尺寸并檢查表格溢出時，我遇到了一個不尋常的問題，它似乎是重疊的。以下是顯示內容:
普通表:
現在是更小的桌子:
這是代碼:
<div class="relative mx-7 mt-4 overflow-x-auto shadow-md sm:rounded-lg">
<!-- dropdown -->
<div class="flex flex-row w-full justify-between py-3 bg-white">
<div class="flex flex-row pl-3">
<label
for="countries"
class="block mb-2 mr-2 my-auto text-sm font-medium text-gray-900 dark:text-white"
>Show</label
>
<select
id="countries"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<label
for="countries"
class="block mb-2 mr-2 ml-2 my-auto text-sm font-medium text-gray-900 dark:text-white"
>Entries</label
>
</div>
<!-- button -->
<div>
<button-primary class="mr-7 py-2 px-4" @onClick="openModalAddAdmin"
>Add Admin</button-primary
>
</div>
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs uppercase bg-red-primary rounded-2xl text-white dark:bg-gray-700 dark:text-gray-400"
>
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input
id="checkbox-all-search"
type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label for="checkbox-all-search" class="sr-only"
>checkbox</label
>
</div>
</th>
<th scope="col" class="px-2 py-3 text-center">Nama</th>
<th scope="col" class="px-2 py-3 text-center">Email</th>
<th scope="col" class="px-2 py-3 text-center">Nomor Telepon</th>
<th scope="col" class="px-2 py-3 text-center">Action</th>
</tr>
</thead>
<tbody>
<tr
@click="openModalDetailAdmin"
class="bg-white cursor-pointer border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
>
<td class="w-4 p-4">
<div class="flex items-center">
<input
id="checkbox-table-search-3"
type="checkbox"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label for="checkbox-table-search-3" class="sr-only"
>checkbox</label
>
</div>
</td>
<th
scope="row"
class="px-2 py-1 text-center font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Roland brilianto
</th>
<td class="px-2 py-1 text-center">email.com</td>
<td class="px-2 py-1 text-center">087886177374</td>
<td class="flex items-center justify-center py-2 space-x-1">
<button
class="bg-blue-primary hover:bg-blue-hover text-white px-3 py-1 rounded-lg"
type="button"
>
Edit
</button>
<button
class="bg-grey-primary hover:bg-grey-hover text-white px-3 py-1 rounded-lg"
type="button"
>
Hapus
</button>
</td>
</tr>
</tbody>
</table>
<!-- Pagination-->
<div class="flex flex-col items-center pb-2 bg-white">
<!-- Help text -->
<span class="text-sm text-gray-700 dark:text-gray-400">
Showing
<span class="font-semibold text-gray-900 dark:text-white">1</span> to
<span class="font-semibold text-gray-900 dark:text-white">10</span> of
<span class="font-semibold text-gray-900 dark:text-white">100</span>
Entries
</span>
<div class="inline-flex mt-2 xs:mt-0">
<!-- Buttons -->
<button
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-primary rounded-l hover:bg-red-hover dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
aria-hidden="true"
class="w-5 h-5 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
clip-rule="evenodd"
></path>
</svg>
Prev
</button>
<button
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-primary border-0 border-l border-gray-700 rounded-r hover:bg-red-hover dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
>
Next
<svg
aria-hidden="true"
class="w-5 h-5 ml-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</div>我該怎么修？ 抱歉，編程不好