Skip to content
HyperUI

No results found.

Back to application components

Tables

Responsive table components for displaying data in dashboards, admin panels, and web applications with bordered, striped, and sticky header options.

5/5 Dark Mode Updated: N/ANo commit information available.

Base

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Base (Dark)

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 dark:*:text-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Bordered

markmead

<div class="overflow-x-auto rounded border border-gray-300 shadow-sm">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Bordered (Dark)

markmead

<div class="overflow-x-auto rounded border border-gray-300 shadow-sm dark:border-gray-600">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 dark:*:text-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Striped

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 *:even:bg-gray-50">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Striped (Dark)

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 dark:*:text-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody
      class="divide-y divide-gray-200 *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800"
    >
      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky headings

markmead

<div class="max-h-46 overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="sticky top-0 bg-white ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky headings (Dark)

markmead

<div class="max-h-46 overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="sticky top-0 bg-white ltr:text-left rtl:text-right dark:bg-gray-900">
      <tr class="*:font-medium *:text-gray-900 dark:*:text-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr class="*:text-gray-900 *:first:font-medium dark:*:text-white">
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky first column

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200">
    <thead class="ltr:text-left rtl:text-right">
      <tr class="*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white">
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200">
      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium"
      >
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Sticky first column (Dark)

markmead

<div class="overflow-x-auto">
  <table class="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-700">
    <thead class="ltr:text-left rtl:text-right">
      <tr
        class="*:font-medium *:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white dark:*:text-white dark:*:first:bg-gray-900"
      >
        <th class="px-3 py-2 whitespace-nowrap">Name</th>
        <th class="px-3 py-2 whitespace-nowrap">DoB</th>
        <th class="px-3 py-2 whitespace-nowrap">Role</th>
        <th class="px-3 py-2 whitespace-nowrap">Salary</th>
      </tr>
    </thead>

    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
        <td class="px-3 py-2 whitespace-nowrap">04/06/1262</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Warrior</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900"
      >
        <td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
        <td class="px-3 py-2 whitespace-nowrap">19/10/1678</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Gentleman</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900"
      >
        <td class="px-3 py-2 whitespace-nowrap">Nadja</td>
        <td class="px-3 py-2 whitespace-nowrap">15/03/1593</td>
        <td class="px-3 py-2 whitespace-nowrap">Vampire Seductress</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900"
      >
        <td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
        <td class="px-3 py-2 whitespace-nowrap">01/09/1971</td>
        <td class="px-3 py-2 whitespace-nowrap">Energy Vampire</td>
        <td class="px-3 py-2 whitespace-nowrap">$53,000</td>
      </tr>

      <tr
        class="*:text-gray-900 *:first:sticky *:first:left-0 *:first:bg-white *:first:font-medium dark:*:text-white dark:*:first:bg-gray-900"
      >
        <td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
        <td class="px-3 py-2 whitespace-nowrap">18/11/1991</td>
        <td class="px-3 py-2 whitespace-nowrap">Familiar/Vampire Hunter</td>
        <td class="px-3 py-2 whitespace-nowrap">$0</td>
      </tr>
    </tbody>
  </table>
</div>

Related components

View all application components