Browser Support

Menu

Tailwind CSS Table Layout

Table layout is used to control how table cells, rows, and columns are adjusted and rendered within the boundaries of a table element. It assists in defining whether the layout of the table should be calculated automatically or adhere to fixed widths.

In this guide, we will explore the table layout utilities in Tailwind CSS in depth, covering the basics of auto and fixed table layouts, applying states like hover and focus, using responsive breakpoints, and much more. By the end, you will have a comprehensive understanding of how to leverage Tailwind CSS to build clean and adaptable tables for your web applications.

Class	Properties	Example
`table-auto`	`table-layout: auto;`	`<div className="table-auto"></div>`
`table-fixed`	`table-layout: fixed;`	`<div className="table-fixed"></div>`

Overview of Table Layout

Auto Layout

The auto layout allows the browser to resize columns based on their content by default. The widths of columns depend naturally on the size of the data contained within.

This is a live editor. Play around with it!

export default function AutoTable() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex items-center justify-center">
      <table className="table-auto border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="border border-gray-400 px-4 py-2">Name</th>
            <th className="border border-gray-400 px-4 py-2">Age</th>
            <th className="border border-gray-400 px-4 py-2">Location</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-400 px-4 py-2">Alice</td>
            <td className="border border-gray-400 px-4 py-2">26</td>
            <td className="border border-gray-400 px-4 py-2">New York</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-4 py-2">Bob</td>
            <td className="border border-gray-400 px-4 py-2">30</td>
            <td className="border border-gray-400 px-4 py-2">Los Angeles</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Fixed Layout

When the layout is set to fixed, the table strictly adheres to specified column widths, ignoring overly lengthy content. This utility enhances performance for large datasets.

The below example has a fixed width utility- w-80. If a cell contains content that exceeds the width, it will cause overflow.

This is a live editor. Play around with it!

export default function FixedTable() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex items-center justify-center">
      <table className="table-fixed w-80 border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="border border-gray-400 px-4 py-2">Name</th>
            <th className="border border-gray-400 px-4 py-2">Age</th>
            <th className="border border-gray-400 px-4 py-2">Location</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-400 px-4 py-2">Alice</td>
            <td className="border border-gray-400 px-4 py-2">26</td>
            <td className="border border-gray-400 px-4 py-2">New York</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-4 py-2">Bob</td>
            <td className="border border-gray-400 px-4 py-2">30</td>
            <td className="border border-gray-400 px-4 py-2">Los Angeles</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

States and Responsiveness

Tailwind CSS allows developers to design interactive and responsive tables by combining table layout utilities with states such as hover and focus, as well as breakpoint modifiers for responsiveness.

Hover and Focus States

Make your tables interactive by leveraging dynamic state-based utilities like hover or focus. These states are ideal for scenarios like highlighting rows during mouse hover.

This is a live editor. Play around with it!

export default function HoverTable() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex items-center justify-center">
      <table className="hover:table-fixed w-60 border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="border border-gray-400 px-4 py-2">ID</th>
            <th className="border border-gray-400 px-4 py-2">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-400 px-4 py-2">1</td>
            <td className="border border-gray-400 px-4 py-2">Active</td>
          </tr>
          <tr>
            <td className="border border-gray-400 px-4 py-2">2</td>
            <td className="border border-gray-400 px-4 py-2">Inactive</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Breakpoint Modifiers

You can use media-queries to render a different table layout per screen. Add modifiers like sm, md, lg, etc. before the table layout utilities.

This is a live editor. Play around with it!

export default function ResponsiveTable() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <table className="md:table-fixed lg:table-auto w-96 border-collapse border border-gray-300">
        <thead>
          <tr>
            <th className="border border-gray-400 px-2 py-1">Column-1</th>
            <th className="border border-gray-400 px-2 py-1">Column-2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td className="border border-gray-400 px-2 py-1">Data</td>
            <td className="border border-gray-400 px-2 py-1">Information</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Real World Examples

Product Inventory Table

A responsive table layout for managing product inventory with status indicators, stock levels, and actions.

This is a live editor. Play around with it!

export default function InventoryTable() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      stock: 145,
      status: "In Stock",
      category: "Electronics",
      lastUpdated: "2023-08-01",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
    },
    {
      id: 2,
      name: "Gaming Mouse",
      stock: 0,
      status: "Out of Stock",
      category: "Gaming",
      lastUpdated: "2023-08-02",
      image: "https://images.unsplash.com/photo-1527814050087-3793815479db"
    },
    {
      id: 3,
      name: "Mechanical Keyboard",
      stock: 23,
      status: "Low Stock",
      category: "Computing",
      lastUpdated: "2023-08-03",
      image: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
    },
  ];

  return (
    <div className="overflow-x-auto">
      <table className="table-auto w-full">
        <thead className="bg-gray-100">
          <tr>
            <th className="px-4 py-2">Image</th>
            <th className="px-4 py-2">Product</th>
            <th className="px-4 py-2">Category</th>
            <th className="px-4 py-2">Stock</th>
            <th className="px-4 py-2">Status</th>
            <th className="px-4 py-2">Last Updated</th>
            <th className="px-4 py-2">Actions</th>
          </tr>
        </thead>
        <tbody>
          {products.map((product) => (
            <tr key={product.id} className="border-b">
              <td className="px-4 py-2">
                <img 
                  src={product.image} 
                  alt={product.name}
                  className="w-12 h-12 object-cover rounded"
                />
              </td>
              <td className="px-4 py-2">{product.name}</td>
              <td className="px-4 py-2">{product.category}</td>
              <td className="px-4 py-2">{product.stock}</td>
              <td className="px-4 py-2">
                <span className={`px-2 py-1 rounded-full text-sm ${
                  product.status === "In Stock" 
                    ? "bg-green-100 text-green-800"
                    : product.status === "Out of Stock"
                    ? "bg-red-100 text-red-800"
                    : "bg-yellow-100 text-yellow-800"
                }`}>
                  {product.status}
                </span>
              </td>
              <td className="px-4 py-2">{product.lastUpdated}</td>
              <td className="px-4 py-2">
                <button className="text-blue-600 hover:text-blue-800">Edit</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Employee Directory Table

A collapsible table showing employee information with expandable rows for additional details.

This is a live editor. Play around with it!

export default function EmployeeDirectory() {
  const employees = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Senior Developer",
      department: "Engineering",
      email: "sarah.j@company.com",
      location: "New York",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      projects: ["Project Alpha", "Project Beta"]
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Product Manager",
      department: "Product",
      email: "michael.c@company.com",
      location: "San Francisco",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      projects: ["Project Gamma", "Project Delta"]
    },
  ];

  return (
    <div className="overflow-x-auto shadow-sm rounded-lg">
      <table className="table-fixed min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projects</th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {employees.map((employee) => (
            <tr key={employee.id} className="hover:bg-gray-50">
              <td className="px-6 py-4 whitespace-nowrap">
                <div className="flex items-center">
                  <div className="flex-shrink-0 h-10 w-10">
                    <img 
                      className="h-10 w-10 rounded-full" 
                      src={employee.avatar} 
                      alt={employee.name}
                    />
                  </div>
                  <div className="ml-4">
                    <div className="text-sm font-medium text-gray-900">{employee.name}</div>
                    <div className="text-sm text-gray-500">{employee.email}</div>
                  </div>
                </div>
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{employee.role}</td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{employee.department}</td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{employee.location}</td>
              <td className="px-6 py-4 whitespace-nowrap">
                <div className="flex flex-wrap gap-2">
                  {employee.projects.map((project, index) => (
                    <span 
                      key={index}
                      className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800"
                    >
                      {project}
                    </span>
                  ))}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Analytics Dashboard Table

A table displaying analytical data with sorting capabilities and visual indicators.

This is a live editor. Play around with it!

export default function AnalyticsTable() {
  const metrics = [
    {
      id: 1,
      page: "Homepage",
      visitors: 45892,
      bounceRate: 32.5,
      avgTime: "2:45",
      conversion: 3.2,
      trend: "up",
      icon: "https://images.unsplash.com/photo-1517292987719-0369a794ec0f"
    },
  ];

  return (
    <div className="bg-white rounded-xl shadow-md overflow-hidden">
      <div className="overflow-x-auto">
        <table className="min-w-full table-fixed">
          <thead>
            <tr className="bg-gray-50">
              <th className="w-1/4 px-6 py-3 border-b border-gray-200 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Page
              </th>
              <th className="w-1/6 px-6 py-3 border-b border-gray-200 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Visitors
              </th>
              <th className="w-1/6 px-6 py-3 border-b border-gray-200 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Bounce Rate
              </th>
              <th className="w-1/6 px-6 py-3 border-b border-gray-200 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Avg. Time
              </th>
              <th className="w-1/6 px-6 py-3 border-b border-gray-200 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Conversion
              </th>
              <th className="w-1/6 px-6 py-3 border-b border-gray-200 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                Trend
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {metrics.map((metric) => (
              <tr key={metric.id}>
                <td className="px-6 py-4">
                  <div className="flex items-center">
                    <img
                      className="h-8 w-8 rounded-full"
                      src={metric.icon}
                      alt={metric.page}
                    />
                    <span className="ml-3 text-sm text-gray-900">{metric.page}</span>
                  </div>
                </td>
                <td className="px-6 py-4 text-right text-sm text-gray-500">
                  {metric.visitors.toLocaleString()}
                </td>
                <td className="px-6 py-4 text-right text-sm text-gray-500">
                  {metric.bounceRate}%
                </td>
                <td className="px-6 py-4 text-right text-sm text-gray-500">
                  {metric.avgTime}
                </td>
                <td className="px-6 py-4 text-right text-sm text-gray-500">
                  {metric.conversion}%
                </td>
                <td className="px-6 py-4 text-right">
                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                    metric.trend === 'up' 
                      ? 'bg-green-100 text-green-800' 
                      : 'bg-red-100 text-red-800'
                  }`}>
                    {metric.trend === 'up' ? '↑' : '↓'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Order History Table

A detailed order history table with expandable rows and status tracking.

This is a live editor. Play around with it!

export default function OrderHistory() {
  const orders = [
    {
      id: "ORD-2023-001",
      customer: "John Smith",
      date: "2023-08-01",
      total: 299.99,
      status: "Delivered",
      items: [
        {
          name: "Premium Headphones",
          quantity: 1,
          price: 199.99,
          image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
        },
        {
          name: "Wireless Charger",
          quantity: 2,
          price: 49.99,
          image: "https://images.unsplash.com/photo-1625723044792-44de16ccb4e8"
        }
      ]
    },
  ];

  return (
    <div className="bg-white shadow-lg rounded-lg overflow-auto">
      <table className="table-auto min-w-full divide-y divide-gray-200">
        <thead>
          <tr className="bg-gray-50">
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Order ID
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Customer
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Date
            </th>
            <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
              Total
            </th>
            <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
              Status
            </th>
            <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
              Details
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-200">
          {orders.map((order) => (
            <tr key={order.id} className="hover:bg-gray-50">
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                {order.id}
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {order.customer}
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {new Date(order.date).toLocaleDateString()}
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
                ${order.total.toFixed(2)}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                  order.status === 'Delivered' 
                    ? 'bg-green-100 text-green-800'
                    : order.status === 'Pending'
                    ? 'bg-yellow-100 text-yellow-800'
                    : 'bg-gray-100 text-gray-800'
                }`}>
                  {order.status}
                </span>
              </td>
              <td className="px-6 py-4 whitespace-nowrap text-center">
                <button className="text-indigo-600 hover:text-indigo-900">
                  View Details
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Task Management Table

A kanban-style table for managing tasks with drag and drop functionality.

This is a live editor. Play around with it!

export default function TaskTable() {
  const tasks = [
    {
      id: 1,
      title: "Implement New Feature",
      priority: "High",
      assignee: "Alex Wong",
      dueDate: "2023-08-15",
      status: "In Progress",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      tags: ["Frontend", "UI/UX"]
    },
  ];

  return (
    <div className="bg-white rounded-xl shadow-lg overflow-auto">
      <table className="table-auto min-w-full divide-y divide-gray-200">
        <thead>
          <tr className="bg-gray-50">
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Task
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Priority
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Assignee
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Due Date
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Status
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Tags
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {tasks.map((task) => (
            <tr 
              key={task.id} 
              className="hover:bg-gray-50 cursor-move"
              draggable="true"
            >
              <td className="px-6 py-4">
                <div className="text-sm font-medium text-gray-900">
                  {task.title}
                </div>
              </td>
              <td className="px-6 py-4">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                  task.priority === 'High' 
                    ? 'bg-red-100 text-red-800'
                    : task.priority === 'Medium'
                    ? 'bg-yellow-100 text-yellow-800'
                    : 'bg-green-100 text-green-800'
                }`}>
                  {task.priority}
                </span>
              </td>
              <td className="px-6 py-4">
                <div className="flex items-center">
                  <img 
                    className="h-8 w-8 rounded-full" 
                    src={task.avatar} 
                    alt={task.assignee} 
                  />
                  <span className="ml-2 text-sm text-gray-900">
                    {task.assignee}
                  </span>
                </div>
              </td>
              <td className="px-6 py-4 text-sm text-gray-500">
                {task.dueDate}
              </td>
              <td className="px-6 py-4">
                <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                  task.status === 'Completed' 
                    ? 'bg-green-100 text-green-800'
                    : task.status === 'In Progress'
                    ? 'bg-blue-100 text-blue-800'
                    : 'bg-gray-100 text-gray-800'
                }`}>
                  {task.status}
                </span>
              </td>
              <td className="px-6 py-4">
                <div className="flex flex-wrap gap-1">
                  {task.tags.map((tag, index) => (
                    <span 
                      key={index}
                      className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Consistency is key when applying Table Layout in Tailwind. Standardize the spacing, fonts, and color schemes across components to give your table a professional look. Adopt a unified set of utility classes and create a design guideline that team members can refer to, ensuring everyone follows the same styling principles.

When teams handle large projects, a style guide helps enforce consistent usage of Table Layout. Document frequently used classes for table cells, rows, and headers, along with padding defaults. This reference not only speeds up development but also drastically reduces the likelihood of visual discrepancies.

Whenever possible, develop components or utility presets for Table Layout. Centralizing these patterns means designers and developers will instinctively align on spacing, borders, typography, and general aesthetic. Ensuring uniformity from the beginning avoids last-minute alignments and styling revisions.

Build Responsive Design

Tailwind provides responsive modifiers that let you change how tables display depending on screen size. Using these modifiers, you can dynamically adjust column widths, text alignment, or padding, ensuring content remains readable.

For example, you might reduce padding on mobile screens to prioritize content while preserving the overall structure. On larger screens, you can add more whitespace and visual separation for clarity.

Testing your table layouts across multiple breakpoints helps identify potential display problems early.

Accessibility Considerations

Enhance Readability and Navigability

Table Layout should prioritize clarity, allowing all users to comprehend content efficiently. Tailwind’s utility classes for font size, line height, and spacing can be tailored to promote legibility. Use consistent table structures and label your columns and rows to help users navigate information confidently.

Additionally, avoid cramming too many cells into a single row or column. Overloading data can hinder readability and make the table harder to interpret. Utilize whitespace strategically and break down extensive tables into smaller, comprehensible segments to keep content accessible for everyone.

Focus on High Contrast

Tailwind offers text and background color utilities that make adjusting contrast levels straightforward. When designing tables, ensure sufficient differentiation between foreground and background to support clear text readability in each cell.

Always test your color combinations using accessibility checkers. Whether you adhere to WCAG 2.1 or another standard, verifying your contrast levels helps confirm that your table is usable by those with varying degrees of vision. This practice aligns with creating designs that cater to everyone’s needs.

Debugging Common Issues

Resolve Common Problems

Sometimes, unintended issues, such as misaligned cells or overflow problems occur. This is more common when using table-fixed with specific height and width. One way to address this is by assigning a larger height and width to the table.

In cases where the table data is highly dynamic, consider switching to table-auto. Also, be sure to apply padding utilities (e.g., px-* and py-*) consistently across all cells to maintain proper spacing.

Isolate Utility Conflicts

With multiple utility classes in play, it’s common for one style to override another unintentionally. If you find your columns or cells behaving erratically, look closely at your class list.

Remove classes one by one, reloading the page after each removal, until the conflict disappears. Once you identify the problematic overlap, reorganize classes to ensure your layout remains consistent and you don’t lose necessary styles.

Border Spacing Caption Side