Table Layout

Class	Properties
tl-auto	table-layout: auto;
tl-f	table-layout: fixed;

Auto

This example sets the table layout to auto. The browser will determine the column widths based on the content.

H1	H2
Short	This is a much longer piece of content

<table class="b-1 b-s bc-c bc-l-silver-3 tl-auto w-full">
  <thead>
    <tr>
      <th class="b-1 b-s bc-l-silver-3 p-3">H1</th>
      <th class="b-1 b-s bc-l-silver-3 p-3">H2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="b-1 b-s bc-l-silver-3 p-3">Short</td>
      <td class="b-1 b-s bc-l-silver-3 p-3">This is a much longer piece of content</td>
    </tr>
  </tbody>
</table>

Fixed

This example sets the table layout to fixed. The column widths are set by the width of the table and the first row.

H1	H2
Short	This is a much longer piece of content

<table class="b-1 b-s bc-c bc-l-silver-3 tl-f w-full">
  <thead>
    <tr>
      <th class="b-1 b-s bc-l-silver-3 p-3">H1</th>
      <th class="b-1 b-s bc-l-silver-3 p-3">H2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="b-1 b-s bc-l-silver-3 p-3">Short</td>
      <td class="b-1 b-s bc-l-silver-3 p-3">This is a much longer piece of content</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.

Media modifiers

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

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

Hover modifiers

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>