CODEWITHSUNDEEP
cssdatatabletailwind-css
Ratnaraj Sukale
Ratnaraj Sukale

Reputation: 63

Tailwind CSS: Fixed First column and other colums scrollable horizontally

I want the first column in my data table to be fixed whereas other columns can be scrollable horizontally exactly like in the link. https://css-tricks.com/wp-content/uploads/2021/02/CleanShot-2021-02-02-at-08.28.56.mp4 how can I do it in tailwind CSS? or do I need javascript?

<table class="min-w-full divide-y divide-gray-200">
  <thead class="bg-gray-50">
    <tr>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase           tracking-wider">Title</th>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
      <th scope="col" class="relative px-6 py-3">
        <span class="sr-only">Edit</span>
      </th>
    </tr>
  </thead>
  <tbody class="bg-white divide-y divide-gray-200">
    <tr>
      <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center">
          <div class="flex-shrink-0 h-10 w-10">
            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
          </div>
          <div class="ml-4">
            <div class="text-sm font-medium text-gray-900">Jane Cooper</div>
            <div class="text-sm text-gray-500">[email protected]</div>
          </div>
        </div>
      </td>
      <td class="px-6 py-4 whitespace-nowrap">
        <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
        <div class="text-sm text-gray-500">Optimization</div>
      </td>
      <td class="px-6 py-4 whitespace-nowrap">
        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> Active </span>
      </td>
      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>
      <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
        <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
      </td>
    </tr>

    <!-- More people... -->
  </tbody>
</table>

Upvotes: 5

Views: 7768

Answers (3)

noor
noor

Reputation: 1

<div class="py-12 w-full">
    <div class="max-w-7xl mx-auto sm:px-4 lg:px-4">
        <tbody class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-2">
            <div class="flex flex-col">
                <td class="my-2 overflow-x-auto sm:-mx lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-4 lg:px-4">
                <div class="shadow overflow-hidden border-b border-gray-100 sm:rounder-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                <thead class=" bg-gray-50">
            <tr>
                <th scope="col"class="px-3 py-4 text-left text-xs font-medium text-gray-500 uppercase  sticky left-0 bg-gray-200 tracking-wider">Title</th>
                <th scope="col" class="px-3 py-4: text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th scope="col" class="px-3 py-4: text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                <th scope="col" class="relative px-6 py-3">
                    <span class="sr-only">Edit</span>
                </th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200:h-20:w-30">
            <tr>
                <td class="px-6 py-4 whitespace-nowrap sticky left-0 bg-white">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                            <img class="h-10 w-10 rounded-full"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
                                alt="">
                        </div>
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900">Jane Cooper</div>
                            <div class="text-sm text-gray-500">[email protected]</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
                    <div class="text-sm text-gray-500">Optimization</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span
                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-400">
                        Active </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>

Upvotes: -1

Arslan Khalid
Arslan Khalid

Reputation: 31

OndrejHj04 has given a perfect answer for this in the above comments. I am just posting it here so it can be found easily. You guys can try his code here Play Tailwind CSS.

<table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50 sticky top-0">
        <tr>
            <th scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase   sticky left-0 bg-gray-200       tracking-wider">Title
            </th>
            <th scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th scope="col"
                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
            <th scope="col" class="relative px-6 py-3">
                <span class="sr-only">Edit</span>
            </th>
        </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
        <tr>
            <td class="px-6 py-4 whitespace-nowrap sticky left-0 bg-white">
                <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full"
                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
                            alt="">
                    </div>
                    <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">Jane Cooper</div>
                        <div class="text-sm text-gray-500">[email protected]</div>
                    </div>
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
                <div class="text-sm text-gray-500">Optimization</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                    Active </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 3

OndrejHj04
OndrejHj04

Reputation: 319

This should work

<h1 class="sticky top-0">STICKY</h1>

Upvotes: 1

Related Questions