Make a responsive data table (Tailwind CSS)

Approach

Wrap the table in overflow-x-auto so it scrolls inside its box instead of widening the page. Use whitespace-nowrap on cells, a sticky header with a background, and even: rows for zebra stripes.

Solution

Make a responsive data tableTry it yourself

<div class="m-6 max-h-60 overflow-auto rounded-xl ring-1 ring-slate-200">
  <table class="min-w-full text-left text-sm whitespace-nowrap">
    <thead class="sticky top-0 bg-slate-100 text-xs tracking-wide text-slate-600 uppercase">
      <tr><th class="px-4 py-3">Invoice</th><th class="px-4 py-3">Customer</th><th class="px-4 py-3">Status</th><th class="px-4 py-3 text-right">Amount</th></tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1042</td><td class="px-4 py-3">Ada Lovelace</td><td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-green-700">Paid</span></td><td class="px-4 py-3 text-right tabular-nums">$240.00</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1043</td><td class="px-4 py-3">Alan Turing</td><td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">Pending</span></td><td class="px-4 py-3 text-right tabular-nums">$1,080.50</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1044</td><td class="px-4 py-3">Grace Hopper</td><td class="px-4 py-3"><span class="rounded-full bg-red-100 px-2 py-0.5 text-red-700">Overdue</span></td><td class="px-4 py-3 text-right tabular-nums">$99.99</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1045</td><td class="px-4 py-3">Katherine Johnson</td><td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-green-700">Paid</span></td><td class="px-4 py-3 text-right tabular-nums">$12.00</td></tr>
    </tbody>
  </table>
</div>

<div class="m-6 max-h-60 overflow-auto rounded-xl ring-1 ring-slate-200">
  <table class="min-w-full text-left text-sm whitespace-nowrap">
    <thead class="sticky top-0 bg-slate-100 text-xs tracking-wide text-slate-600 uppercase">
      <tr><th class="px-4 py-3">Invoice</th><th class="px-4 py-3">Customer</th><th class="px-4 py-3">Status</th><th class="px-4 py-3 text-right">Amount</th></tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1042</td><td class="px-4 py-3">Ada Lovelace</td><td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-green-700">Paid</span></td><td class="px-4 py-3 text-right tabular-nums">$240.00</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1043</td><td class="px-4 py-3">Alan Turing</td><td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-amber-700">Pending</span></td><td class="px-4 py-3 text-right tabular-nums">$1,080.50</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1044</td><td class="px-4 py-3">Grace Hopper</td><td class="px-4 py-3"><span class="rounded-full bg-red-100 px-2 py-0.5 text-red-700">Overdue</span></td><td class="px-4 py-3 text-right tabular-nums">$99.99</td></tr>
      <tr class="even:bg-slate-50"><td class="px-4 py-3">#1045</td><td class="px-4 py-3">Katherine Johnson</td><td class="px-4 py-3"><span class="rounded-full bg-green-100 px-2 py-0.5 text-green-700">Paid</span></td><td class="px-4 py-3 text-right tabular-nums">$12.00</td></tr>
    </tbody>
  </table>
</div>

Pitfalls

Tables that widen the whole page on phones; always wrap them in an overflow-x-auto container.
Numbers that don't line up; use text-right tabular-nums.

Variations

On phones, turn rows into cards with block md:table-row patterns for very wide tables.

Approach

Solution

Pitfalls

Variations

More Tailwind CSS recipes