Table Layout
Controls the table cell layout algorithm.
Utility | Properties |
---|---|
tl-a | 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.
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
This example sets the table layout to 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.
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>