How to make element table responsive in React.js Tailwindcss

Question

I want to make a responsive table on desktop and mobile devices with Tailwind CSS. However, this table component is a child of <Outlet /> in React.js router dom. dekstop view mobile view

// Layout.jsx
return (
   <div className="flex bg-gray-100 min-h-screen relative">
       <SidebarAdmin
           isMobile={isMobile}
           mobileOpen={mobileOpen}
           handleDrawerToggle={handleDrawerToggle}
           route={route}
       />
       <main className="flex-1 p-4 flex flex-col relative">
           <NavbarAdmin
               isMobile={isMobile}
               isScrolled={isScrolled}
               route={route}
               handleDrawerToggle={handleDrawerToggle}
           />
           <Outlet />
       </main>
   </div>
);

Then this is the component that will be rendered on the <Outlet />

// Table.jsx
return (
  <>
    <div className="bg-white p-4 rounded-lg shadow-[0_1px_2px_rgba(3,18,26,0.2)] mb-6 overflow-x-auto">
      <table>
        <thead className="border-b border-b-[#f0f3f3] mb-4">
          <tr className="text-sm text-[#8f8f8f]">
            <th className="px-3 py-2" align="left">Nama</th>
            <th className="px-3 py-2" align="left">Mengajar</th>
            <th className="px-3 py-2" align="left">Telepon</th>
            <th className="px-3 py-2" align="left">Gender</th>
            <th className="px-3 py-2" align="left">Email</th>
            <th className="px-3 py-2" align="left">Alamat</th>
            <th className="px-3 py-2" align="right">Dibuat Pada</th>
          </tr>
        </thead>
        <tbody>
          {getTeachers.map((teacher, i) => (
            <tr key={i}>
              <td className="px-3 py-2">
                <div className="cursor-pointer flex items-center gap-2 max-w-[300px]">
                  <Avatar variant="rounded" alt={teacher.name} src={teacher.picture} sx={{ bgcolor: 'white' }} />
                  <span className="truncate">{teacher.name}</span>
                </div>
              </td>
              <th className="px-3 py-2" align="left">{teacher.subject}</th>
              <td className="px-3 py-2 bg-red-200">{teacher.phone}</td>
              <td className="px-3 py-2">{teacher.gender}</td>
              <td className="px-3 py-2">{teacher.email}</td>
              <td className="px-3 py-2">{teacher.address}</td>
              <td className="px-3 py-2 bg-red-200" align="right">{teacher.registered}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

I have tried to add overflow-x-auto to the <table> wrapper element, but nothing happened

Answer 1

Try overflow-x-scroll and see if it works..