Table Layout

Controls the table cell layout algorithm.

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.

<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.

<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>

Using utility variants

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

Using media queries

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

Using hover states

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