Table Layout

Class	Style
tl-a	table-layout: auto;
tl-f	table-layout: fixed;

Auto

Initial value

The browser will determine the column widths based on the content.

Title	Opening Line
Letters to Anne	It's finally springtime here on earth!

<table class="b-1  bc-c tc-indigo tl-auto w-full">
  <thead>
    <tr>
      <th class="b-1 bc-indigo bg-indigo-2 p-3">Title</th>
      <th class="b-1 bc-indigo bg-indigo-2 p-3">Opening Line</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="b-1 bc-indigo p-3">Letters to Anne</td>
      <td class="b-1 bc-indigo p-3">It's finally springtime here on earth!</td>
    </tr>
  </tbody>
</table>

Fixed

The column widths are set by the width of the table and the first row.

Title	Opening Line
Letters to Anne	It's finally springtime here on earth!

<table class="b-1  bc-c tc-indigo tl-f w-full">
  <thead>
    <tr>
      <th class="b-1 bc-indigo bg-indigo-2 p-3">Title</th>
      <th class="b-1 bc-indigo bg-indigo-2 p-3">Opening Line</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="b-1 bc-indigo p-3">Letters to Anne</td>
      <td class="b-1 bc-indigo p-3">It's finally springtime here on earth!</td>
    </tr>
  </tbody>
</table>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:tl-*,md:tl-*, lg:tl-*, and xxl:tl-* to allow targeting specific utilities in different viewports.

<div class="tl-f md:tl-a ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:tl-* utility to override elements and change their values when hovering over them.

<div class="tl-f h:tl-a ..."></div>