Question 294976 in Html Question posted in
Some basic documentation can be found here.

Html – Tailwindcss – Pagination shows above the table

The problem I’m encountering is that the pagination is appearing above the table, whereas my expectation is for it to be displayed after the table. Ideally, when I add multiple rows, the pagination should follow immediately after the table.

https://play.tailwindcss.com/3Q9D3mnnnn

enter image description here

Tags:

2

Answers


  1. 0

    Are you sure you want to give this absolute class to the following div <div class="absolute w-full overflow-x-auto">? When I removed it, the pagination showed under the table.

    Login or Signup to reply.
  2. 0

    All that I did was removed the pagination div from where it was earlier nd added it inside the same div as table and it met the rqirements.

    <div>
                        <div class="relative">
                            <div class="absolute w-full overflow-x-auto">
                                <table class="divide-y divide-gray-200 table-auto">
                                    <thead
                                        class="text-xs font-medium tracking-wider text-left text-white uppercase bg-blue-600 whitespace-nowrap">
                                        <tr class="py-4 divide-x">
                                            <th scope="col" class="sticky left-0 z-10 p-4 bg-blue-600 w-96">
                                                Name</th>
                                            <th scope="col" class="p-4">
                                                Mobile Number</th>
                                            <th scope="col" class="p-4">
                                                Employee Id</th>
                                            <th scope="col" class="p-4">
                                                Branch</th>
                                            <th scope="col" class="p-4">
                                                Department</th>
                                            <th scope="col" class="p-4">
                                                Shift</th>
                                            <th scope="col" class="p-4">
                                                Staff Category</th>
                                            <th scope="col" class="p-4">
                                                Designation</th>
                                            <th scope="col" class="p-4">
                                                Date of Joining</th>
                                            <th scope="col" class="p-4">
                                                Resignation Date</th>
                                            <th scope="col" class="p-4">
                                                Role</th>
                                            <th scope="col" class="p-4">
                                                Company</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-sm bg-white divide-y divide-gray-200 whitespace-nowrap">
                                        <tr>
                                            <td class="sticky left-0 w-full p-4 bg-white whitespace-nowrap">
                                                <div class="flex items-center gap-2 w-max">
                                                    <img class="w-8 h-8 rounded-full"
                                                        src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
                                                    <a href="" class="font-medium text-blue-600">John Doe</a>
                                                </div>
                                            </td>
                                            <td class="p-4">9192939494</td>
                                            <td class="p-4">NA-1362</td>
                                            <td class="p-4">Sengodampalayam</td>
                                            <td class="p-4">Tele Calling 1</td>
                                            <td class="p-4">Regular Shift</td>
                                            <td class="p-4">Permanant</td>
                                            <td class="p-4">Senior Telecaller</td>
                                            <td class="p-4">28-07-2023</td>
                                            <td class="p-4">-</td>
                                            <td class="p-4">Branch Manager</td>
                                            <td class="p-4">XYZ India Private Limited</td>
                                        </tr>
    
                                        <!-- Add more rows as needed -->
                                        
                                    </tbody>
                                </table>
                                <div class="flex justify-center mt-4 mb-20">
                            <nav class="relative z-0 inline-flex -space-x-px shadow-sm" aria-label="Pagination">
                                <a href="#"
                                    class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-blue-100">
                                    <span class="sr-only">Previous</span>
                                    <!-- Heroicon name: chevron-left -->
                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </a>
                                <a href="#"
                                    class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
                                    1
                                </a>
                                <a href="#"
                                    class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
                                    2
                                </a>
                                <a href="#"
                                    class="relative items-center hidden px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 md:inline-flex hover:bg-blue-100">
                                    3
                                </a>
                                <a href="#"
                                    class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
                                    4
                                </a>
                                <a href="#"
                                    class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-blue-100">
                                    5
                                </a>
                                <a href="#"
                                    class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-blue-100">
                                    <span class="sr-only">Next</span>
                                    <!-- Heroicon name: chevron-right -->
                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                        fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                </a>
                            </nav>
                        </div>
                            </div>
                        </div>
                        
                    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search