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

<tr> <th class="tal py8px px12px bg18181B bb1pxsolid27272A cA1A1AA fs12px">Name	Description	Status
A	매우 긴 설명 텍스트가 들어가도 컬럼 너비가 균등하게 유지됩니다	활성
B	짧음	비활성

All columns have equal width

table-layout: auto — tla

<tr> <th class="tal py8px px12px bg18181B bb1pxsolid27272A cA1A1AA fs12px">Name	Description	Status
A	매우 긴 설명 텍스트가 들어가도 컬럼 너비가 균등하게 유지됩니다	활성
B	짧음	비활성

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

`tlf`table-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 (셀)`	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.

`tla`table-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.

caption-side empty-cells border-collapse