table-layout

테이블 컬럼 너비 알고리즘을 제어합니다. fixed는 콘텐츠와 무관하게 균등 분배하고, auto는 콘텐츠 길이에 따라 자동 조절합니다.

클래스 목록

클래스	CSS	설명
`tlf`	table-layout: fixed	컬럼 너비를 균등 분배. 콘텐츠와 무관하게 고정
`tla`	table-layout: auto	콘텐츠에 따라 컬럼 너비 자동 조절 (기본값)

시각적 비교

같은 데이터에 tlf와 tla를 적용했을 때의 차이를 비교합니다.

table-layout: fixed — tlf

이름	설명	상태
A	매우 긴 설명 텍스트가 들어가도 컬럼 너비가 균등하게 유지됩니다	활성
B	짧음	비활성

모든 컬럼이 균등한 너비를 가집니다

table-layout: auto — tla

이름	설명	상태
A	매우 긴 설명 텍스트가 들어가도 컬럼 너비가 균등하게 유지됩니다	활성
B	짧음	비활성

콘텐츠 길이에 따라 컬럼 너비가 달라집니다

실전 예시

데이터 테이블에서 tlf와 w100p를 조합하면 일관된 테이블 너비를 확보할 수 있습니다.

<!-- 균등 너비 데이터 테이블 -->
<table class="tlf w100p bcc">
  <thead>
    <tr>
      <th>이름</th>
      <th>이메일</th>
      <th>역할</th>
      <th>상태</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="oh toe wsn">김철수</td>
      <td class="oh toe wsn">very-long-email-address@example.com</td>
      <td>관리자</td>
      <td>활성</td>
    </tr>
  </tbody>
</table>

클래스별 상세

`tlf`table-layout: fixed

첫 번째 행(또는 col 태그)의 너비를 기준으로 모든 컬럼을 균등하게 분배합니다. 콘텐츠 길이와 관계없이 안정적인 테이블 레이아웃을 만들 수 있으며, 렌더링 성능도 더 좋습니다.

<!-- 고정 컬럼 너비 테이블 -->
<table class="tlf w100p bcc">
  <thead>
    <tr>
      <th>제목</th>
      <th>작성자</th>
      <th>날짜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="oh toe wsn">매우 긴 제목이 들어가도 컬럼 너비가 변하지 않습니다</td>
      <td>홍길동</td>
      <td>2024-01-01</td>
    </tr>
  </tbody>
</table>

자주 쓰는 조합

`tlf w100p`	부모 너비에 맞춘 균등 컬럼 테이블
`tlf w100p bcc`	균등 컬럼 + 테두리 합침
`tlf w100p + oh toe wsn (셀)`	균등 컬럼 + 긴 텍스트 말줄임 처리

성능 이점

tlf는 첫 번째 행만 분석하면 되므로, 대용량 데이터 테이블에서 렌더링 속도가 tla보다 빠릅니다.

`tla`table-layout: auto

브라우저 기본값입니다. 모든 행의 콘텐츠를 분석하여 가장 넓은 셀에 맞춰 컬럼 너비를 자동으로 결정합니다. 데이터가 적을 때 자연스러운 배치를 원할 때 사용합니다.

<!-- 자동 컬럼 너비 테이블 (기본값) -->
<table class="tla w100p bcc">
  <thead>
    <tr>
      <th>ID</th>
      <th>상품명</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>프리미엄 무선 블루투스 노이즈캔슬링 헤드폰</td>
      <td>299,000원</td>
    </tr>
  </tbody>
</table>

주의

tla는 브라우저가 모든 행을 분석해야 하므로 데이터가 많을수록 렌더링이 느려질 수 있습니다. 대용량 테이블에는 tlf를 권장합니다.

팁 & 주의사항

tlf + w100p로 일관된 테이블

tlf w100p를 조합하면 부모 너비에 맞춰 컬럼이 균등 분배됩니다. 데이터 테이블의 기본 세팅으로 추천합니다.

텍스트 넘침 처리

tlf와 함께 셀에 oh toe wsn을 적용하면 긴 텍스트를 말줄임(...)으로 처리할 수 있습니다.

tlf는 width 필수

tlf는 테이블에 명시적 너비(w100p 등)가 설정되어야 효과가 나타납니다. 너비가 없으면 tla와 동일하게 동작할 수 있습니다.

caption-side empty-cells border-collapse