tableLayout 예제 - 설정
<style>
table, td {
border: 1px solid black;
}
#hz {
width: 100%;
}
</style>
<button onclick="homzzang()">클릭</button>
<table id="hz">
<tr>
<td>Homzzang.com</td>
<td>홈짱닷컴</td>
</tr>
<tr>
<td>sir.kr</td>
<td>그누보드</td>
</tr>
<tr>
<td>yamette.com</td>
<td>야메떼닷컴</td>
</tr>
</table>
<script>
function homzzang() {
document.getElementById("hz").style.tableLayout = "fixed";
}
</script>
결과보기
tableLayout 정의
테이블의 (셀, 열, 행) 레이아웃 설정/반환.
1.
기본값: auto
반환값: table-layout 속성값을 나타내는 문자열
CSS속성: table-layout
모든 브라우저 지원.
tableLayout 구문
[반환]
object.style.tableLayout
[설정]
object .style.tableLayout = "속성값"
[속성값]
auto
열 너비는 깨지지 않는 가장 넓은 내용 으로 설정. (기본값)
테이블이 완전히 로드되기 전 모든 내용에 접근할 필요가 있어 가끔 느림.
fixed
열 너비는, 셀 내용이 아니라, 테이블 및 열 너비 에 의해 결정.
테이블의 첫 번째 행만 수신하면 바로 테이블 표시 가능. (auto보다 빠름)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
tableLayout 예제 - 반환
<style>
table, td {border: 1px solid black;}
#hz {width: 100%;}
</style>
<table id="hz" style="table-layout:fixed;">
<tr>
<td>Homzzang.com</td>
<td>홈짱닷컴</td>
</tr>
<tr>
<td>sir.kr</td>
<td>그누보드</td>
</tr>
<tr>
<td>yamette.com</td>
<td>야메떼닷컴</td>
</tr>
</table>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.tableLayout );
}
</script>
결과보기
