table-layout 속성

정의

행(row)과 열(column)으로 구성된 테이블(table)의 셀(cell)에 블록요소를 집어넣어 보여주는 방법.

속성

값 설명
auto (기본값) 자동으로 테이블 배열 기능을 사용.
column 의 너비는 셀 안의 고정적으로 가장 넓은 콘텐트에 의해 정해짐.
최종 레이아웃이 결정되기 전까지 테이블의 모든 내용을 읽어들인 다음 정해지므로 다소 렌더링이 늦어질 수 있음.
fixed 고정된 테이블 배열 기능을 사용
수평레이아웃은 셀 안의 콘텐츠가 아니라 테이블의 너비와 컬럼의 너비에 의해 결정.
auto layout 보다 렌더링 속도는 빠름.
inherit 지정 요소의 테이블 레이아웃 속성을 부모(상위) 요소로부터 상속받음

예시

Example

table-layout:auto;(정의하지않은 기본상태)

title1 title2 title3 title4 title5
table-layout:auto; 내용에따라 셀의 넓이가 정해집니다. 텍스트텍스트텍스트텍스 텍스트텍스트텍스트텍스트텍스트텍스트텍스트 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트

table-layout:fixed;

title1 title2 title3 title4 title5
col1 { width:180px; }
table-layout:fixed; col의 넓이에 따라 셀이 고정으로 바뀝니다. 		col2 { width:150px; }
텍스트텍스트텍스트텍스 		col3 { width:200px; }
텍스트텍스트텍스트텍스트텍스트텍스트텍스트 		col4 { width:150px; }
텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트 		col5 { width:auto; }
텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트