我有如下图所示的表格,它从右侧溢出,我如何添加滚动,我在这段代码中使用 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>
最佳答案
用带有 overflow-x 类和所需宽度的 div 包裹您的表格,并将 w-full 类添加到您的表格类中。
<div class='overflow-x'>
<table class='table-auto overflow-scroll w-full'>
<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>
</div>
https://stackoverflow.com/questions/71485050/