테이블 레이아웃이 고정(fixed)되는가를 반환하거나 설정한다.

	Script	object.style.tableLayout=[sVal]
	HTML	<ELEMENT style="table-layout:sVal;">
	CSS	cssSelector {table-layout:sVal;}

인수

cssSelector : (스타일 선택자)

tableLayout 속성을 가질수 있는 엘레멘트(ELEMENT)나 클라스(class) 이름 혹은 인식자(id)이다.

sVal : (속성 문자열)

tableLayout 스타일 속성은 테이블 레이아웃이 고정(fixed)되는가를 나타내는 문자열이다.

auto	디폴트이며, 컬럼 너비가 내용의 줄바꿈이 적게 가장 넓게 자동으로 설정된다.
fixed	테이블과 컬럼 너비가 각 col 개체 너비의 합산이나, 지정되지 않았으면 처음 줄의 칸들의 너비 합산으로 고정된다. 테이블의 너비가 지정되지 않았으면, 디폴트에 의하여 자동적으로 내용이 줄바꿈이 적게되는 방향으로 이 width 값은 100%가 된다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 auto이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

tableLayout 속성을 사용하여 테이블의 표현을 최적화할 수 있다. Explorer은 이 속성으로 사용자에게 빠른 방식으로 정보를 제공하고 테이블을 한 줄씩 표현한다. tableLayout 속성은 다음 과정을 통하여 한 테이블의 컬럼 너비를 결정한다.

1. col이나 colGroup엘레멘트의 width 속성을 사용한다.
2. 첫번째 줄에 있는 td엘레멘트의 width 속성을 사용한다.
3. 내용의 크기에 관계없이 테이블의 컬럼들을 서로 같게 분할한다.
4. 칸 내용의 크기가 컬럼에 고정된 너비를 초과하면, 줄바꿈이 가능하면 내용이 줄바꿈하거나, 잘려(clip)진다.
5. tableLayout 속성이 fixed로 설정되었으면, overflow 속성이 내용의 td 엘레멘트 너비 넘침을 처리하기 위하여 사용될 수 있다.
6. height가 설정되었으면, 그 설정된 높이를 초과하는 내용은 잘려진다.

tableLayout 속성을 fixed로 설정하면, 테이블 표현의 속도를 현저히 증가시킨다.

줄의 height 설정도 브라우저가 표현하기 전에 테이블 내용을 점검하는 것이 생락되므로 추가적으로 테이블 표현 속도를 증가시킨다.

적용

개체	script	CSS CSS 규격	IE 버전
currentStyle	[sVal=]objectcurrentStyle.tableLayout	cssSelector{table-layout:sVal}	IE5(win16,win32,unix,mac),IE5.5(ce)
runtimeStyle	objectruntimeStyle.tableLayout[=sVal]	cssSelector{table-layout:sVal}	IE5(win16,win32,unix,mac),IE5.5(ce)
style	style.style.tableLayout[=sVal]	cssSelector{table-layout:sVal}	IE5(win16,win32,unix,mac),IE5.5(ce)
table	table.style.tableLayout[=sVal]	cssSelector{table-layout:sVal}	IE5(win16,win32,unix,mac),IE5.5(ce)

참조

width, width

이 속성은 CSS2(Cascading Style Sheets Level 2)에서 정의되었다.

style ⇒

tableLayout 스타일속성⇒

<STYLE>.but{widht:100}</STYLE>
<SCRIPT>
function doShow(){
  showA.innerText='tableObj.style.tableLayout='+tableObj.style.tableLayout;
}
</SCRIPT>
<TABLE id="tableObj" style="table-layout:fixed" width=500 border=1 cellpadding=5 cellspacing=7>
<COL width=100><COL width=50><COL width=300>
<TR height=10>
<TD>td 1-1</TD><TD>td 1-2</TD><TD>td 1-3</TD>
</TR>
<TR height=20>
<TD>td 2-1</TD><TD>td 2-2</TD><TD>td 2-3</TD>
</TR>
<TR height=30>
<TD>td 3-1</TD><TD>td 3-2</TD><TD>td 3-3</TD>
</TR>
<TR height=40>
<TD>td 4-1</TD><TD>td 4-2</TD><TD>td 4-3</TD>
</TR>
</TABLE>
<BUTTON
  onclick="tableObj.style.tableLayout='auto';showA.innerText=tableObj.style.tableLayout"
  class=but>tableLayout='auto'</BUTTON>
<BUTTON
  onclick="tableObj.style.tableLayout='fixed';;showA.innerText=tableObj.style.tableLayout"
  class=but>tableLayout='fixed'</BUTTON>
<DIV>tableObj.style.tableLayout=<SPAN id=showA style=color:blue>결과 표시창</SPAN></DIV>

style ⇒

tableLayout 스타일속성

⇒

최종 수정: 06/19/2025 04:05:52

All right reserved

비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요.

http://koxo.com/lang/js/style/tableLayout.html