laravel 如何使用html + Tailwind CSS创建可滚动的表格

idfiyjo8  于 2023-05-08  发布在  其他
关注(0)|答案(4)|浏览(157)

我有这个表像在下面的图片,它是从右边溢出,我怎么能添加滚动,我使用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>

cld4siwp

cld4siwp1#

使用带有overflow-x class和所需宽度的div Package 表,并将w-full class添加到表类中。

<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>
jdgnovmf

jdgnovmf2#

<div class="overflow-auto ..."></div> you can try this

tailewindcss链接

hfwmuf9z

hfwmuf9z3#

您可以将这些类添加到您的表中,使您的表在x轴上可滚动

<table class="table-auto overflow-x-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>
zd287kbt

zd287kbt4#

您可以将其全部放入具有固定宽度和高度的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>

当然,可以根据需要设置宽度和高度。

相关问题