Table Layout - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "table-layout"; export const description = "Utilities for controlling the table layout algorithm.";

Examples

Sizing columns automatically

Use the table-auto utility to automatically size table columns to fit the contents of its cells:

<Figure> <Example padding={false}> { <div className="my-8 overflow-hidden"> <table className="w-full table-auto border-collapse text-sm"> <thead> <tr> <th className="border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Song </th> <th className="border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Artist </th> <th className="border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Year </th> </tr> </thead> <tbody className="bg-white dark:bg-gray-800"> <tr> <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> The Sliding Mr. Bones (Next Stop, Pottersville) </td> <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Malcolm Lockyer </td> <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> 1961 </td> </tr> <tr> <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Witchy Woman </td> <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> The Eagles </td> <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> 1972 </td> </tr> <tr> <td className="border-b border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400"> Shining Star </td> <td className="border-b border-gray-200 p-4 text-gray-500 dark:border-gray-600 dark:text-gray-400"> Earth, Wind, and Fire </td> <td className="border-b border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400"> 1975 </td> </tr> </tbody> </table> </div> } </Example>

html

<!-- [!code classes:table-auto] -->
<table class="table-auto">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

</Figure>

Using fixed column widths

Use the table-fixed utility to ignore the content of the table cells and use fixed widths for each column:

<Figure> <Example padding={false}> { <div className="my-8 overflow-hidden"> <table className="w-full table-fixed border-collapse text-sm"> <thead> <tr> <th className="border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Song </th> <th className="border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Artist </th> <th className="border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-gray-600 dark:text-gray-200"> Year </th> </tr> </thead> <tbody className="bg-white dark:bg-gray-800"> <tr> <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> The Sliding Mr. Bones (Next Stop, Pottersville) </td> <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Malcolm Lockyer </td> <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> 1961 </td> </tr> <tr> <td className="border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> Witchy Woman </td> <td className="border-b border-gray-100 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400"> The Eagles </td> <td className="border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-gray-700 dark:text-gray-400"> 1972 </td> </tr> <tr> <td className="border-b border-gray-200 p-4 pl-8 text-gray-500 dark:border-gray-600 dark:text-gray-400"> Shining Star </td> <td className="border-b border-gray-200 p-4 text-gray-500 dark:border-gray-600 dark:text-gray-400"> Earth, Wind, and Fire </td> <td className="border-b border-gray-200 p-4 pr-8 text-gray-500 dark:border-gray-600 dark:text-gray-400"> 1975 </td> </tr> </tbody> </table> </div> } </Example>

html

<!-- [!code classes:table-fixed] -->
<table class="table-fixed">
  <thead>
    <tr>
      <th>Song</th>
      <th>Artist</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

</Figure>

You can manually set the widths for some columns and the rest of the available width will be divided evenly amongst columns without an explicit width. The widths set in the first row will set the column width for the whole table.

Responsive design