Building a Responsive Table with Tailwind CSS: A Comprehensive Guide

Heads up, this content is in beta. Use at your own risk!

Tables play a crucial role in organizing and displaying data. With Tailwind CSS, you can design tables that are both visually appealing and responsive. Let’s dive in to create a basic responsive table.

Creating a Basic Table

Here’s a simple table with some sample data:

<table class="min-w-full border divide-y divide-gray-200">
  <thead class="bg-gray-50">
    <tr>
      <th
        class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase"
      >
        Name
      </th>
      <th
        class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase"
      >
        Role
      </th>
    </tr>
  </thead>
  <tbody class="bg-white divide-y divide-gray-200">
    <tr>
      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
        John Doe
      </td>
      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
        Developer
      </td>
    </tr>
    <tr>
      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
        Jane Smith
      </td>
      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
        Designer
      </td>
    </tr>
  </tbody>
</table>

In this example, we’ve set up a basic table with a thead and tbody, applying different styles to each. The thead has a light gray background (bg-gray-50), while each header cell (th) has padding (px-6 py-3), left-aligned text (text-left), small, uppercase text (text-xs font-medium text-gray-500 uppercase), and wider letter spacing (tracking-wider).

The tbody has a white background (bg-white) and horizontal divider lines (divide-y divide-gray-200). Each data cell (td) has padding (px-6 py-4), does not wrap whitespace (whitespace-nowrap), and has small, gray text (text-sm text-gray-500).

Making the Table Responsive

To make our table responsive, we’ll wrap it in a div with horizontal scrolling:

<div class="overflow-x-auto">
  <!-- Table goes here -->
</div>

Now, when the table exceeds the screen width, the user can scroll horizontally to view the rest of the table.