JavaScript에서 테이블 레이아웃 설정하기
JavaScript에서 테이블의 셀(cell), 행(row), 열(column) 레이아웃을 올바르게 제어하려면 tableLayout 속성을 사용합니다. 이 속성을 "fixed"로 설정하면 테이블과 각 열의 너비가 지정된 값에 따라 고정되며, 셀 안의 내용 길이에 영향을 받지 않습니다.
tableLayout 속성의 주요 값
- auto — 기본값입니다. 브라우저가 셀 내용을 분석해 열 너비를 자동으로 계산합니다.
- fixed — 테이블과 열의 너비가 고정됩니다. 전체 테이블을 해석하지 않고도 렌더링할 수 있어 화면 표시 속도가 빨라지는 장점이 있습니다.
예제
다음 코드를 실행하면 버튼 클릭 시 JavaScript로 테이블 셀, 행, 열의 레이아웃 방식을 고정(fixed)으로 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 2px solid blue;
}
#myID {
width: 100%;
}
</style>
</head>
<body>
<button onclick = "display()">Set Layout Property</button>
<table id = "myID">
<tr>
<td>This is a text for demo</td>
<td>This is another text</td>
</tr>
<tr>
<td>One</td>
<td>1</td>
</tr>
<tr>
<td>Two</td>
<td>2</td>
</tr>
<tr>
<td>Three</td>
<td>3</td>
</tr>
</table>
<script>
function display() {
document.getElementById("myID").style.tableLayout = "fixed";
}
</script>
</body>
</html>
위 예제에서는 document.getElementById()로 테이블 요소를 가져온 뒤, style.tableLayout 속성에 "fixed" 값을 할당하여 레이아웃을 고정했습니다. 버튼을 클릭하면 각 열의 너비가 균등하게 나뉘며, 셀 내용과 관계없이 일정한 레이아웃이 유지되는 것을 확인할 수 있습니다.