CSS의 table-layout 속성은 브라우저가 테이블의 행(row), 열(column), 셀(cell)을 배치할 때 사용할 알고리즘을 정의합니다. 이 속성을 활용하면 테이블 레이아웃을 세밀하게 제어할 수 있습니다.
table-layout 속성의 주요 값
- auto (기본값): 셀 내용에 따라 열 너비가 자동으로 조정됩니다.
- fixed: 테이블과 열의 너비가 지정된 값에 고정되며, 셀 내용과 무관하게 레이아웃이 결정됩니다. 렌더링 속도가 빨라지는 장점이 있습니다.
문법(Syntax)
CSS table-layout 속성의 기본 문법은 다음과 같습니다.
Selector {
table-layout: /*값*/;
}아래 예제들을 통해 table-layout 속성의 동작 방식을 살펴보겠습니다.
예제 1: auto와 fixed 비교하기
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: 2em;
display: inline-block;
border: 1px solid black;
}
td {
border: 1px solid black;
}
#one {
table-layout: auto;
width: auto;
}
#one + table {
table-layout: fixed;
width: 100px;
}
</style>
</head>
<body>
<h2>CSS에서 테이블 레이아웃의 동작 방식</h2>
<table id="one">
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
<table>
<caption>Cricketers</caption>
<tr>
<td>ShaneWarne</td>
</tr>
<tr>
<td></td>
<td>Adam</td>
</tr>
<tr>
<td></td>
<td>Shimron Hetmyer</td>
<td></td>
</tr>
</table>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
첫 번째 테이블은 auto 방식이 적용되어 셀 내용 길이에 따라 열 너비가 유동적으로 변하는 반면, 두 번째 테이블은 fixed 방식으로 너비 100px에 고정되어 내용과 관계없이 균일한 열 너비가 유지되는 것을 볼 수 있습니다.
예제 2: fixed 레이아웃 활용하기
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
width: 50%;
box-shadow: inset 0 0 14px orange;
}
td {
box-shadow: inset 0 0 5px lime;
white-space: nowrap;
outline: thin dotted;
}
table {
border: 3px solid black;
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>
<div>
<table>
<caption>Demo Caption</caption>
<tr>
<td>ABCD</td>
</tr>
<tr>
<td></td>
<td>EFGH</td>
</tr>
<tr>
<td></td>
<td>IJKLM NOPQRST</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
이 예제에서는 테이블 전체 너비를 부모 요소(div)의 100%로 설정하고 table-layout: fixed를 적용했습니다. 그 결과 셀 내용의 길이와 상관없이 모든 열이 동일한 너비로 나뉘어 안정적인 레이아웃이 구현됩니다.
정리
table-layout: fixed는 열 너비가 일정해야 하는 데이터 테이블이나 성능 최적화가 필요한 경우에 유용하며, auto는 내용에 맞춰 유연하게 조정되어야 하는 경우에 적합합니다. 상황에 맞게 두 값을 활용하면 더 깔끔하고 효율적인 테이블 디자인을 만들 수 있습니다.