Tailwind CSS: Fixed First column and other colums scrollable horizontally

Question

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">jane.cooper@example.com</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>

score 1 · Answer 1 · answered Feb 27 '22 at 15:03

1

This should work

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

answered Feb 27 '22 at 15:03

OndrejHj04

320
2
12

it did not work – Ratnaraj Sukale Feb 28 '22 at 16:44
Strange. For me, at tailwind playground, it worked. https://play.tailwindcss.com/ek50zuzcKD – OndrejHj04 Feb 28 '22 at 16:48
Maybe, paste here a bit of your code, please. Then I can give you targeted feedback. – OndrejHj04 Feb 28 '22 at 16:52
no not like that can you please check the full video once? the first column fixed and other columns can scroll – Ratnaraj Sukale Feb 28 '22 at 18:07
video link - https://css-tricks.com/wp-content/uploads/2021/02/CleanShot-2021-02-02-at-08.28.56.mp4 – Ratnaraj Sukale Feb 28 '22 at 18:07
Ok so please put here your code if you have some. Thank you – OndrejHj04 Feb 28 '22 at 18:08
Because when position sticky given to the first row of the table should work. I am curious why it doesn't work – OndrejHj04 Feb 28 '22 at 18:10
1

i have updated code in the question – Ratnaraj Sukale Feb 28 '22 at 18:34
For your code this sticked the first line. Feel free to see it here https://play.tailwindcss.com/4t2LiBBvt3 – OndrejHj04 Feb 28 '22 at 18:51
Does it work bro? – OndrejHj04 Mar 02 '22 at 14:37
nope it is making first row fixed not first column – Ratnaraj Sukale Mar 02 '22 at 17:03
Please try this – OndrejHj04 Mar 02 '22 at 20:19
nope this is also not working – Ratnaraj Sukale Mar 04 '22 at 17:28
Well please give me an example where I can directly use this. Your code does not overflow so I can't make the change directly to help you. – OndrejHj04 Mar 05 '22 at 06:58
you can make it overflow by reducing screen size or adding more colums – Ratnaraj Sukale Mar 05 '22 at 10:12
I see, I am just stupid :). What about this? https://play.tailwindcss.com/qCfCQqgIS1 – OndrejHj04 Mar 05 '22 at 11:49
@OndrejHj04 your last comment is a solution. Can you please update your answer above so it will be useful for others? – trainoasis Aug 02 '22 at 10:14

Tailwind CSS: Fixed First column and other colums scrollable horizontally

1 Answers1