Tailwind CSS Table Examples
Clean data tables for dashboards and admin panels — a simple table, a zebra-striped invoice table with status badges and a users table with avatars, checkboxes and row actions.
3 components · live preview · copy as HTML or JSX · free for commercial use
3 tables to copy
Simple Table
Tables
| Name | Role | |
|---|---|---|
| Jane Cooper | jane@example.com | Admin |
| Devon Lane | devon@example.com | Editor |
| Kim Seo-yeon | seoyeon@example.com | Viewer |
The overflow-x-auto wrapper plus a min-width lets the table scroll sideways on phones instead of squashing columns.
<div class="w-full overflow-x-auto rounded-xl border border-slate-200 bg-white">
<table class="w-full min-w-[32rem] text-left text-sm">
<caption class="sr-only">Team members</caption>
<thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
<tr>
<th scope="col" class="px-4 py-3">Name</th>
<th scope="col" class="px-4 py-3">Email</th>
<th scope="col" class="px-4 py-3">Role</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600">
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 font-medium text-slate-900">Jane Cooper</td>
<td class="px-4 py-3">jane@example.com</td>
<td class="px-4 py-3">Admin</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 font-medium text-slate-900">Devon Lane</td>
<td class="px-4 py-3">devon@example.com</td>
<td class="px-4 py-3">Editor</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 font-medium text-slate-900">Kim Seo-yeon</td>
<td class="px-4 py-3">seoyeon@example.com</td>
<td class="px-4 py-3">Viewer</td>
</tr>
</tbody>
</table>
</div>Striped Table with Status Badges
Tables
| Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-1042 | Northwind Ltd. | Paid | $1,250.00 |
| INV-1043 | Blue Harbor | Pending | $740.50 |
| INV-1044 | Pinecone Co. | Overdue | $3,100.00 |
| INV-1045 | Atlas Studio | Paid | $480.00 |
Zebra stripes come from odd:/even: variants; tabular-nums keeps right-aligned amounts lined up.
<div class="w-full overflow-x-auto rounded-xl border border-slate-200 bg-white">
<table class="w-full min-w-[36rem] text-left text-sm">
<caption class="sr-only">Recent invoices</caption>
<thead class="border-b border-slate-200 text-slate-900">
<tr>
<th scope="col" class="px-4 py-3 font-semibold">Invoice</th>
<th scope="col" class="px-4 py-3 font-semibold">Customer</th>
<th scope="col" class="px-4 py-3 font-semibold">Status</th>
<th scope="col" class="px-4 py-3 text-right font-semibold">Amount</th>
</tr>
</thead>
<tbody class="text-slate-600">
<tr class="odd:bg-white even:bg-slate-50">
<td class="px-4 py-3 font-mono text-xs text-slate-500">INV-1042</td>
<td class="px-4 py-3 font-medium text-slate-900">Northwind Ltd.</td>
<td class="px-4 py-3"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Paid</span></td>
<td class="px-4 py-3 text-right tabular-nums">$1,250.00</td>
</tr>
<tr class="odd:bg-white even:bg-slate-50">
<td class="px-4 py-3 font-mono text-xs text-slate-500">INV-1043</td>
<td class="px-4 py-3 font-medium text-slate-900">Blue Harbor</td>
<td class="px-4 py-3"><span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-800">Pending</span></td>
<td class="px-4 py-3 text-right tabular-nums">$740.50</td>
</tr>
<tr class="odd:bg-white even:bg-slate-50">
<td class="px-4 py-3 font-mono text-xs text-slate-500">INV-1044</td>
<td class="px-4 py-3 font-medium text-slate-900">Pinecone Co.</td>
<td class="px-4 py-3"><span class="rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-semibold text-rose-700">Overdue</span></td>
<td class="px-4 py-3 text-right tabular-nums">$3,100.00</td>
</tr>
<tr class="odd:bg-white even:bg-slate-50">
<td class="px-4 py-3 font-mono text-xs text-slate-500">INV-1045</td>
<td class="px-4 py-3 font-medium text-slate-900">Atlas Studio</td>
<td class="px-4 py-3"><span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">Paid</span></td>
<td class="px-4 py-3 text-right tabular-nums">$480.00</td>
</tr>
</tbody>
</table>
</div>Table with Avatars & Actions
Tables
Users
Manage who can access this workspace.
| User | Role | Status | Actions | |
|---|---|---|---|---|
|
LA
Leslie Alexander leslie@example.com |
Owner | Active | Edit, Leslie Alexander | |
|
MF
Michael Foster michael@example.com |
Member | Invited | Edit, Michael Foster |
Each row checkbox and Edit link names its user for screen readers, so repeated controls are not ambiguous.
<div class="w-full rounded-2xl border border-slate-200 bg-white shadow-sm">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
<div>
<h2 class="text-base font-bold text-slate-900">Users</h2>
<p class="text-sm text-slate-500">Manage who can access this workspace.</p>
</div>
<button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-700">Add user</button>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[40rem] text-left text-sm">
<caption class="sr-only">Workspace users</caption>
<thead class="bg-slate-50 text-xs font-semibold uppercase tracking-wide text-slate-500">
<tr>
<th scope="col" class="w-10 px-5 py-3"><input type="checkbox" aria-label="Select all users" class="h-4 w-4 rounded border-slate-300 accent-indigo-600" /></th>
<th scope="col" class="px-5 py-3">User</th>
<th scope="col" class="px-5 py-3">Role</th>
<th scope="col" class="px-5 py-3">Status</th>
<th scope="col" class="px-5 py-3"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-slate-600">
<tr class="hover:bg-slate-50">
<td class="px-5 py-3"><input type="checkbox" aria-label="Select Leslie Alexander" class="h-4 w-4 rounded border-slate-300 accent-indigo-600" /></td>
<td class="px-5 py-3">
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-400 text-xs font-bold text-white">LA</span>
<div><p class="font-medium text-slate-900">Leslie Alexander</p><p class="text-xs text-slate-500">leslie@example.com</p></div>
</div>
</td>
<td class="px-5 py-3">Owner</td>
<td class="px-5 py-3"><span class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-700"><span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>Active</span></td>
<td class="px-5 py-3 text-right"><a href="#" class="font-semibold text-indigo-600 hover:text-indigo-800">Edit<span class="sr-only">, Leslie Alexander</span></a></td>
</tr>
<tr class="hover:bg-slate-50">
<td class="px-5 py-3"><input type="checkbox" aria-label="Select Michael Foster" class="h-4 w-4 rounded border-slate-300 accent-indigo-600" /></td>
<td class="px-5 py-3">
<div class="flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 text-xs font-bold text-white">MF</span>
<div><p class="font-medium text-slate-900">Michael Foster</p><p class="text-xs text-slate-500">michael@example.com</p></div>
</div>
</td>
<td class="px-5 py-3">Member</td>
<td class="px-5 py-3"><span class="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-500"><span class="h-1.5 w-1.5 rounded-full bg-slate-400"></span>Invited</span></td>
<td class="px-5 py-3 text-right"><a href="#" class="font-semibold text-indigo-600 hover:text-indigo-800">Edit<span class="sr-only">, Michael Foster</span></a></td>
</tr>
</tbody>
</table>
</div>
</div>Making tables readable and responsive
Good tables are quiet: light row dividers (divide-y divide-slate-100) or zebra stripes (odd:bg-white even:bg-slate-50), a subtle header background and generous cell padding. Left-align text, right-align numbers and add tabular-nums so digits line up in columns. Status columns read faster with small colored badges, as long as each badge also has a word like Paid or Overdue.
On phones, wrap the table in a container with overflow-x-auto and give the table a min-width (min-w-[32rem]) so columns keep their shape and the table scrolls sideways instead of squashing every cell.
Accessibility tips
Use real <table>, <thead>, <th> and <td> elements, never a grid of divs, so screen readers can announce headers for each cell. Add scope="col" to column headers, a <caption> (it can be sr-only) that names the table, and accessible names for repeated controls — the actions table labels every checkbox and Edit link with the user's name.
Frequently Asked Questions
How do I make a Tailwind table responsive?↓
Wrap the <table> in a div with overflow-x-auto and give the table a minimum width such as min-w-[32rem]. On small screens the table scrolls horizontally while the rest of the page stays fixed.
How do I add striped rows in Tailwind?↓
Add odd:bg-white even:bg-slate-50 to each <tr>. The odd: and even: variants map to the :nth-child(odd) and :nth-child(even) selectors.
How do I make a table header sticky?↓
Give the scrolling container a max height (max-h-96 overflow-auto) and add sticky top-0 plus a background color to the <th> cells, so the header stays visible while rows scroll beneath it.
Last updated: