Tailwind CSS Tables

Although complex data displays in modern web design are sometimes replaced by card-based layouts, traditional tables remain indispensable for displaying structured data. Tailwind provides some utility classes to help you quickly build beautiful, responsive tables.

Basic Table Styling

A basic table with borders can be created by combining border, padding, and text alignment utility classes.

<div class="overflow-x-auto">
  <table class="min-w-full text-sm divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">Jane Cooper</td>
        <td class="px-6 py-4 whitespace-nowrap">Regional Paradigm Technician</td>
        <td class="px-6 py-4 whitespace-nowrap">jane.cooper@example.com</td>
        <td class="px-6 py-4 whitespace-nowrap">Admin</td>
      </tr>
      <!-- More people... -->
    </tbody>
  </table>
</div>

Key utility class analysis:

• min-w-full: Ensures the table is at least as wide as its container on small screens, can be combined with overflow-x-auto for horizontal scrolling.
• divide-y divide-gray-200: In tbody and thead, add gray top borders between rows to form dividers.
• px-6 py-4: Provide comfortable padding for cells (th and td).
• text-left: By default th is centered, here unified to left alignment.
• whitespace-nowrap: Prevent cell content from wrapping, keeping the table tidy.

Table Layout

Use table-auto and table-fixed to control the table's layout algorithm.

• table-auto (default): The browser calculates column widths based on cell content. Columns with more content will be wider. This usually produces good results, but can cause layout jumps if content length varies greatly.

• table-fixed: Table and column widths are determined by their own width or the width of the first row cells. It ignores content size. This is usually faster and provides more predictable layout.

<table class="table-fixed w-full">
  <colgroup>
    <col class="w-1/2">
    <col class="w-1/4">
    <col class="w-1/4">
  </colgroup>
  <thead>
    <!-- ... -->
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
</table>

In table-fixed mode, you can precisely set the width for each column.

Border Collapse

Use border-collapse and border-separate to control whether table borders are merged or separated.

• border-collapse: (default) Adjacent cell borders are merged into a single border. This is the most common style.

• border-separate: Borders are separated. You can use border-spacing-x-{size} and border-spacing-y-{size} to control the distance between borders.

<table class="border-separate border-spacing-2 border border-slate-500 ...">
  <!-- ... -->
</table>

Zebra Striping

Use odd and even variants to easily create zebra-striped (alternating row colors) tables, improving readability.

<tbody class="bg-white divide-y divide-gray-200">
  <!-- ... -->
  <tr class="odd:bg-white even:bg-slate-50">
    <!-- ... -->
  </tr>
  <!-- ... -->
</tbody>

By combining these core table, border, and color utility classes, you can build clear, readable data tables that meet various needs.