Table

A Tailwind CSS table component for displaying tabular data.

Product	Status	Price
Classic Watch SKU: WCH-001	Delivered	$249.00
Eau de Parfum SKU: PRF-042	Shipping	$89.00
Smartphone Pro SKU: PHN-128	Processing	$999.00
Wireless Headphones SKU: HPH-256	Cancelled	$349.00

Striped rows

Add even:bg-muted/50 to table rows for alternating row backgrounds.

Invoice	Status	Amount
INV-001	Paid	$250.00
INV-002	Pending	$150.00
INV-003	Paid	$350.00
INV-004	Unpaid	$450.00
INV-005	Paid	$550.00
Total		$1,750.00

<div class="w-full overflow-x-auto">
  <table class="table">
    <thead class="table-header">
      <tr class="table-row">
        <th class="table-head">Invoice</th>
        <th class="table-head">Status</th>
        <th class="table-head text-right">Amount</th>
      </tr>
    </thead>
    <tbody class="table-body">
      <tr class="table-row even:bg-muted/50">
        <td class="table-cell font-medium">INV-001</td>
        <td class="table-cell text-muted-foreground">Paid</td>
        <td class="table-cell text-right">$250.00</td>
      </tr>
      <tr class="table-row even:bg-muted/50">
        <td class="table-cell font-medium">INV-002</td>
        <td class="table-cell text-muted-foreground">Pending</td>
        <td class="table-cell text-right">$150.00</td>
      </tr>
      <tr class="table-row even:bg-muted/50">
        <td class="table-cell font-medium">INV-003</td>
        <td class="table-cell text-muted-foreground">Paid</td>
        <td class="table-cell text-right">$350.00</td>
      </tr>
      <tr class="table-row even:bg-muted/50">
        <td class="table-cell font-medium">INV-004</td>
        <td class="table-cell text-muted-foreground">Unpaid</td>
        <td class="table-cell text-right">$450.00</td>
      </tr>
      <tr class="table-row even:bg-muted/50">
        <td class="table-cell font-medium">INV-005</td>
        <td class="table-cell text-muted-foreground">Paid</td>
        <td class="table-cell text-right">$550.00</td>
      </tr>
    </tbody>
    <tfoot class="table-footer">
      <tr class="table-row">
        <td class="table-cell font-medium" colspan="2">Total</td>
        <td class="table-cell text-right font-medium">$1,750.00</td>
      </tr>
    </tfoot>
  </table>
</div>

Customization

Combine table classes with Tailwind utilities and other components for custom styling. This example uses the Card component to create a GitHub-style file browser.

gufodotdev chore: release v0.0.2	300cd92 2 hours ago
apps/docs	chore: add vercel analytics	3 hours ago
packages/ui	chore: release v0.0.2	2 hours ago
.gitignore	initial setup	last week
LICENSE	chore: prepare package for npm publishing	3 hours ago
README.md	initial setup	last week
package.json	initial setup	last week

How it works

The table component is a CSS-only set of classes for styling native HTML tables. It includes hover states on rows and consistent spacing for cells.

Structure

A table uses native HTML table elements with corresponding classes:

<table class="table">
  <thead class="table-header">
    <tr class="table-row">
      <th class="table-head">Header</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="table-cell">Cell</td>
    </tr>
  </tbody>
</table>

For horizontal scrolling on small screens, wrap the table in a container with overflow-x-auto:

<div class="overflow-x-auto">
  <table class="table">...</table>
</div>

Class reference

All available classes for the table component.

Class	Description
`table`	Add to `<table>` element for base table styles
`table-header`	Add to `<thead>` element for header section styles
`table-body`	Add to `<tbody>` element for body section styles
`table-footer`	Add to `<tfoot>` element for footer section styles
`table-row`	Add to `<tr>` element for row styles with hover state
`table-head`	Add to `<th>` element for header cell styles
`table-cell`	Add to `<td>` element for data cell styles

<table class="table">
  <thead class="table-header">
    <tr class="table-row">
      <th class="table-head">Name</th>
      <th class="table-head">Email</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="table-cell">John</td>
      <td class="table-cell">john@example.com</td>
    </tr>
  </tbody>
</table>