table-layout
Controls the column width algorithm for tables. fixed distributes evenly regardless of content, and auto adjusts automatically based on content length.
Class List
| Class | CSS | Description |
|---|---|---|
tlf | table-layout: fixed | Distributes column widths evenly. Fixed regardless of content |
tla | table-layout: auto | Auto-adjusts column widths based on content (default) |
Visual Comparison
Compares the difference when applying tlf and tla to the same data.
table-layout: fixed — tlf
| Name | Description | Status |
|---|---|---|
| A | Column widths stay even no matter how long the description text is | Active |
| B | Short | Inactive |
All columns have equal width
table-layout: auto — tla
| Name | Description | Status |
|---|---|---|
| A | Column widths stay even no matter how long the description text is | Active |
| B | Short | Inactive |
Column widths vary based on content length
Practical Examples
Combining tlf and w100p in data tables ensures consistent table width.
<!-- Equal-width data table -->
<table class="tlf w100p bcc">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="oh toe wsn">John Doe</td>
<td class="oh toe wsn">very-long-email-address@example.com</td>
<td>Admin</td>
<td>Active</td>
</tr>
</tbody>
</table>Class Details
tlftable-layout: fixed
Distributes all columns evenly based on the first row (or col tag) widths. Creates a stable table layout regardless of content length, with better rendering performance.
<!-- Fixed column width table -->
<table class="tlf w100p bcc">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="oh toe wsn">Column width does not change even with a very long title</td>
<td>Hong Gildong</td>
<td>2024-01-01</td>
</tr>
</tbody>
</table>Common Combinations
tlf w100p | Equal-column table fitted to parent width |
tlf w100p bcc | Equal columns + collapsed borders |
tlf w100p + oh toe wsn (cell) | Equal columns + text truncation with ellipsis |
Performance Advantage
tlf only needs to analyze the first row, so rendering is faster than tla for large data tables.
tlatable-layout: auto
Browser default. Analyzes all row content and auto-determines column widths to fit the widest cell.
<!-- Auto column width table (default) -->
<table class="tla w100p bcc">
<thead>
<tr>
<th>ID</th>
<th>Product name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Premium wireless Bluetooth noise-canceling headphones</td>
<td>$299</td>
</tr>
</tbody>
</table>Caution
tla requires the browser to analyze all rows, so rendering may slow down with more data. tlf is recommended for large tables.
Tips & Notes
Consistent table with tlf + w100p
Combining tlf w100p distributes columns evenly to fit the parent width. Recommended as the default for data tables.
Text Overflow Handling
Applying oh toe wsn to cells along with tlf enables text truncation with ellipsis (...).
tlf requires explicit width
tlf requires an explicit width (w100p, etc.) on the table.