how to make a table scrollable with html Tailwind CSS-CodePudding

i have this table like in the image below, it is overflow from the right side, how can I add scrolling, I am using Tailwind CSS like in this code:

  <table >
                    <thead>
                    <tr >
                        <th >No.</th>
                        <th >First Name</th>
                        <th >Second Name</th>
                        <th >Third Name</th>
                        <th >Department</th>
                        <th >Stage</th>
                        <th >Email</th>
                        <th >Roles</th>
                        <th >status</th>
                        <th >University Email</th>
                        <th >University Password</th>
                        <th >Students Files</th>
                        <th >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>

CodePudding user response：

Wrap your table with a div with overflow-x class and your required width, and add w-full class to your table 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>

CodePudding user response：

<div ></div> you can try this

tailewindcss link

CodePudding user response：

You can put it all into a div with a fixed width and height, then use

overflow: scroll;

like this

 <style>
 #table {
    width: 50%;
    height: 100%;
    overflow: scroll;
}
</style>
 <div id="table">
 <table>
                    <thead>
                    <tr >
                        <th >No.</th>
                        <th >First Name</th>
                        <th >Second Name</th>
                        <th >Third Name</th>
                        <th >Department</th>
                        <th >Stage</th>
                        <th >Email</th>
                        <th >Roles</th>
                        <th >status</th>
                        <th >University Email</th>
                        <th >University Password</th>
                        <th >Students Files</th>
                        <th >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>

of course set the width and height to whatever you need.