CSS - table-layout 테이블 크기 고정 시키기 fixed, auto 차이

table-layout 속성은 테이블 레이아웃을 정의할 때 사용하는 알고리즘을 선택합니다

auto, fixed 가 있습니다.

table.a {
  table-layout: auto;
  width: 300px
}

table.b {
  table-layout: fixed;
  width: 300px
}

 

table-layout

auto 

브라우저에서 자동 테이블 레이아웃 알고리즘을 사용합니다.

테이블 열의 크기는 테이블이 깨지지 않는 선에 한해서 가장 넓은 내용으로 설정됩니다.

 

fixed

고정 테이블 레이아웃 알고리즘을 사용합니다.

테이블 내에서 첫 행의 너비로 지정되고, 나머지 행의 너비는 영향을 끼치지 않습니다.

만약에 첫 행의 너비가 없으면, 콘텐츠 내부 내용과는 상관없이, 모든 행이 동일한 너비를 가지게 됩니다.

 

성능 차이

fixed 방식이 성능적으로 더 빠르고 우수합니다.

대량 테이블일 경우 테이블을 모두 렌더링 하기전까지 테이블을 하나도 보여주지 않지만,

fixed 방식은 테이블을 로드 하는 동안, 먼저 상단을 볼 수 있어서 좀 더 사용자 경험에 좋습니다.

 

코드펜 예시

See the Pen table-layout by powerku (@powerku) on CodePen.