Tailwind CSS - Table Layout

Tailwind CSS - Table Layout

Tailwind provides utilities to control the algorithm a browser uses to lay out table cells, rows, and columns. This choice can impact both the performance and predictability of your tables.

Table Layout Utilities

There are two main utilities for controlling the table layout algorithm.

Class	CSS Properties	Behavior
table-auto	table-layout: auto;	The browser determines column widths based on the content within them. Columns will expand to fit the widest content in any cell.
table-fixed	table-layout: fixed;	Column widths are determined by the table’s width and the widths of its columns (or are divided equally if no widths are set). Content that overflows will be clipped or wrapped.

When to Use table-auto vs. table-fixed

• Use table-auto (Default) when you want the table columns to dynamically resize based on their content. It’s convenient but can lead to unpredictable layouts if some content is very long.
• Use table-fixed when you need a predictable and stable layout, especially for large data tables. It offers better performance because the browser doesn’t need to read the entire table content before rendering. This is the recommended choice for most data-driven tables.

Practical Examples

Example: table-auto

Notice how the ‘Description’ column in the example below expands significantly to accommodate its long content, shrinking the other columns.

<div class="p-8 bg-slate-50">
  <h3 class="text-xl font-semibold mb-4">Auto Layout Table (`table-auto`)</h3>
  <div class="shadow-md rounded-lg overflow-hidden">
    <table class="table-auto w-full text-sm text-left text-slate-500">
      <thead class="text-xs text-slate-700 uppercase bg-slate-100">
        <tr>
          <th scope="col" class="px-6 py-3">Acronym</th>
          <th scope="col" class="px-6 py-3">Stands For</th>
          <th scope="col" class="px-6 py-3">Description</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">API</td>
          <td class="px-6 py-4">Application Programming Interface</td>
          <td class="px-6 py-4">A set of rules allowing different applications to communicate with each other.</td>
        </tr>
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">JSON</td>
          <td class="px-6 py-4">JavaScript Object Notation</td>
          <td class="px-6 py-4">A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. This is a very long description to demonstrate how the column width adapts to its content.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Example: table-fixed

With table-fixed, we can define explicit column widths. The long content in the ‘Description’ column is now truncated (or would wrap if configured) because it cannot expand the column’s width.

<div class="p-8 bg-slate-50">
  <h3 class="text-xl font-semibold mb-4">Fixed Layout Table (`table-fixed`)</h3>
  <div class="shadow-md rounded-lg overflow-hidden">
    <table class="table-fixed w-full text-sm text-left text-slate-500">
      <thead class="text-xs text-slate-700 uppercase bg-slate-100">
        <tr>
          <th scope="col" class="px-6 py-3 w-[15%]">Acronym</th>
          <th scope="col" class="px-6 py-3 w-[30%]">Stands For</th>
          <th scope="col" class="px-6 py-3 w-[55%]">Description</th>
        </tr>
      </thead>
      <tbody class="divide-y">
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">API</td>
          <td class="px-6 py-4">Application Programming Interface</td>
          <td class="px-6 py-4">A set of rules allowing different applications to communicate with each other.</td>
        </tr>
        <tr class="bg-white">
          <td class="px-6 py-4 font-medium text-slate-900">JSON</td>
          <td class="px-6 py-4">JavaScript Object Notation</td>
          <td class="px-6 py-4 truncate">A lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. This is a very long description that will be truncated.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Making Tables Responsive

Tables are notoriously difficult to make responsive. A common and effective best practice is to wrap the table in a container element and make that container scroll horizontally on small screens.

<!-- On small screens, this container will have a horizontal scrollbar -->
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500">
        <!-- ... your table head and body ... -->
    </table>
</div>