Tailwind CSS Tables Collection

Explore this collection of versatile table components built with Tailwind CSS. These examples provide clean, responsive designs suitable for various data presentation needs in modern web applications.

Each table comes with a preview and readily copyable HTML code. Simply integrate them into your Tailwind project and customize as needed.

Basic Table

Product name Color Category Price
Apple MacBook Pro 17" Silver Laptop $2999
Microsoft Surface Pro White Laptop PC $1999
Magic Mouse 2 Black Accessories $99

Striped Table

Uses the odd:bg-white even:bg-gray-50 utility classes on table rows within <tbody>.

User Email Role Status
Alice Johnson alice.j@example.com Admin Active
Bob Williams bob.w@example.com Developer Active
Charlie Brown charlie.b@example.com Designer Pending
Diana Davis diana.d@example.com Support Inactive

Bordered Table

Adds borders to the table and cells using border border-collapse border-gray-300 on the table and border border-gray-300 on cells.

Invoice ID Customer Amount Date
INV-001 Ethan Hunt $150.00 2023-10-26
INV-002 Ilsa Faust $275.50 2023-10-27
INV-003 Benji Dunn $99.99 2023-10-28

Hoverable Row Table

Adds a hover effect to table rows using hover:bg-gray-100 and optionally cursor-pointer on rows within <tbody>.

Task Assigned To Due Date Priority
Design Homepage Mockup Sarah Lee 2023-11-10 High
Develop API Endpoint Mike Chen 2023-11-15 High
Write Documentation Lisa Green 2023-11-20 Medium
User Testing Team 2023-11-25 Low

Selectable Row Table

Includes checkboxes for row selection. Basic hover styles are included. You'll need JavaScript to handle the actual selection logic (checking boxes, toggling background colors like .bg-blue-50).

 File Name Type Size Last Modified
report-q3.pdf PDF Document 1.2 MB 2023-10-25
logo-final.png PNG Image 350 KB 2023-10-20
presentation.pptx PowerPoint Presentation 5.8 MB 2023-10-15
budget.xlsx Excel Spreadsheet 75 KB 2023-09-30

Responsive Table (Stacked Mobile)

This table transforms into a stacked layout on smaller screens (below 768px). It uses custom CSS (included in the <style> tag of this page) and data-label attributes on table cells.

Name Title Email Role Actions
Jane Doe CEO jane.doe@company.com Admin Edit Delete
John Smith Marketing Head john.smith@company.com Editor Edit Delete
Peter Jones Lead Developer peter.jones@company.com Member Edit Delete

Expandable Row Table

Rows can be clicked to reveal more details in a secondary row. Requires minimal JavaScript (included in the <script> block at the end of this page) to toggle the visibility of the detail row.

Order ID Customer Date Total
ORD-101 Michael Scott 2023-10-28 $125.50
ORD-102 Dwight Schrute 2023-10-29 $75.00
ORD-103 Pam Beesly 2023-10-30 $50.25

Grouped Row Table

Uses multiple <tbody> elements or styled rows to visually group related data.

Employee Department Status
Sales Department
Andy Bernard Sales Active
Phyllis Lapin-Vance Sales Active
Accounting Department
Angela Martin Accounting Active
Kevin Malone Accounting Active
Oscar Martinez Accounting On Leave
Human Resources
Toby Flenderson HR Active

FAQ on Tailwind CSS Tables

How do I create a basic table using Tailwind CSS?

Creating a basic table requires HTML table markup combined with Tailwind utility classes. Start with standard <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements. Apply classes like w-full for full width, border for borders, and p-4 for cell padding. Responsive tables often need an overflow-x-auto wrapper for horizontal scrolling on mobile devices.

What's the difference between table-auto and table-fixed layout utilities?

Table-auto automatically sizes columns based on cell content, adjusting dynamically as text length changes. Table-fixed ignores content length and divides space equally (or according to set widths). Choose table-auto for dynamic data where column width should match content or table-fixed when you need consistent column widths regardless of content.

How can I make Tailwind CSS tables responsive?

Wrap your table in a container with overflow-x-auto to enable horizontal scrolling on small screens. For complex data presentation, consider responsive design patterns like column hiding, stacking rows as cards, or collapsible sections. Many component libraries offer responsive table variants with built-in mobile-friendly features for optimal data visualization across devices.

Can I create striped tables with Tailwind?

Yes! Use the odd:bg-gray-50 or even:bg-gray-50 utilities on table rows to create zebra striping. For example:

<tr class="even:bg-gray-50">

This simple pattern enhances readability in data-heavy tables by alternating row backgrounds, improving the user interface without custom CSS.

How do I add hover effects to table rows?

Apply the hover: variant to your row styling. For example, hover:bg-slate-50 highlights rows when users mouse over them. This interactive table pattern improves user experience by providing visual feedback. You can combine hover effects with other conditional formatting for sophisticated table interactions.

What are the best Tailwind component libraries for advanced tables?

Several high-quality libraries offer pre-built table components:

  • Tailwind UI (official premium components)
  • Flowbite (comprehensive free tables)
  • DaisyUI (simple, customizable tables)
  • Material Tailwind (Material Design styled tables)
  • HyperUI (modern, accessible tables)

These provide sortable tables, filtering options, pagination, and other advanced features beyond basic styling.

How do I create table headers that stick when scrolling?

Create sticky headers with the sticky and top-0 utilities on your <thead> or <tr> elements. Add z-10 to ensure proper layering and a background color to prevent content showing through. This table structure pattern improves usability for long data tables, keeping column headers visible during vertical scrolling.

How can I customize table borders in Tailwind CSS?

Control borders using utilities like border, border-collapse, border-separate, and color variants like border-gray-200. Apply to specific elements (table, rows, cells) for different effects:

  • Full borders: border border-gray-200
  • Horizontal dividers: border-b
  • No borders: Remove border classes
  • Rounded corners: Add rounded to cells (with border-separate)

Can I create sortable tables with pure Tailwind?

Tailwind provides styling only. For sortable table functionality, you'll need JavaScript. Common approaches: Use table components from libraries (Tailwind UI, Flowbite), integrate with frameworks like React Table, add sorting icons with Tailwind classes (rotate, transition), or implement custom sorting with Alpine.js for lightweight applications. The styling/functionality separation follows Tailwind's utility-first CSS approach.

How do I handle tables with lots of data in Tailwind?

For large datasets, implement:

  • Table pagination with page navigation
  • Infinite scrolling within fixed height containers
  • Data filtering to show relevant information
  • Collapsible rows for hierarchical data
  • Column toggles to hide/show columns

Combine these data display techniques with table-fixed layout and overflow handling for optimal performance and usability in admin dashboards and web applications.