我有这个表像在下面的图片,它是从右边溢出,我怎么能添加滚动,我使用Tailwind CSS像在这段代码:
<table class="table-auto overflow-scroll">
<thead>
<tr class="bg-gray-100">
<th class="w-20 px-4 py-2">No.</th>
<th class="px-4 py-2">First Name</th>
<th class="px-4 py-2">Second Name</th>
<th class="px-4 py-2">Third Name</th>
<th class="px-4 py-2">Department</th>
<th class="px-4 py-2">Stage</th>
<th class="px-4 py-2">Email</th>
<th class="px-4 py-2">Roles</th>
<th class="px-4 py-2">status</th>
<th class="px-4 py-2">University Email</th>
<th class="px-4 py-2">University Password</th>
<th class="px-4 py-2">Students Files</th>
<th class="px-4 py-2">Actions</th>
</tr>
</thead>
<tbody>
@if(isset($users)) @include('dashboard.users.partials.users_details') @endif
@if(isset($searches)) @include('dashboard.users.partials.search') @endif
@if(isset($statusSearch)) @include('dashboard.users.partials.status_search') @endif
</tbody>
</table>
4条答案
按热度按时间cld4siwp1#
使用带有overflow-x class和所需宽度的div Package 表,并将w-full class添加到表类中。
jdgnovmf2#
tailewindcss链接
hfwmuf9z3#
您可以将这些类添加到您的表中,使您的表在x轴上可滚动
zd287kbt4#
您可以将其全部放入具有固定宽度和高度的div中,然后使用
溢出:滚动;
像这样
当然,可以根据需要设置宽度和高度。