【问题标题】：how to make a table scrollable with html + Tailwind CSS如何使用 html + Tailwind CSS 使表格可滚动
【发布时间】：2022-08-10 11:32:53
【问题描述】：
我有这张表，如下图所示，它从右侧溢出，如何添加滚动，我正在使用 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>
标签：
html
css
laravel
tailwind-css
【解决方案1】：
用具有溢出-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>
您可以将其全部放入具有固定宽度和高度的div中，然后使用
溢出：滚动；
像这样
<style>
#table {
width: 50%;
height: 100%;
overflow: scroll;
}
</style>
<div id="table">
<table>
<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>
当然，将宽度和高度设置为您需要的任何值。
您可以将这些类添加到您的表格中，以使您的表格可在 x 轴上滚动
<table class="table-auto overflow-x-scroll w-full block">
<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>